use

const value = use(resource);

• 参考
  • use(resource)
• 用法
  • 使用 use 读取 context
  • 将数据从服务器流式传递给客户端
  • 处理 rejected Promise
• 疑难解答
  • “Suspense Exception: This is not a real error!”

use(resource)

在组件中调用 use 以读取类似于 Promise 或 context 的资源的值。

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

与 React Hook 不同的是，可以在循环和条件语句（如 if ）中调用 use 。但需要注意的是，调用 use 的函数仍然必须是一个组件或 Hook。

当使用 Promise 调用 use API 时，它会与 Suspense 和 错误边界 集成。当传递给 use 的 Promise 处于 pending 时，调用 use 的组件也会 挂起 。如果调用 use 的组件被包装在 Suspense 边界内，将显示后备 UI。一旦 Promise 被解决，Suspense 后备方案将被使用 use API 返回的数据替换。如果传递给 use 的 Promise 被拒绝，将显示最近错误边界的后备 UI。

参见下方更多示例 。

use API 返回从资源中读取的值，类似于 fullfilled Promise 或 context 。

使用 use 读取 context

当 context 被传递给 use 时，它的工作方式类似于 useContext 。而 useContext 必须在组件的顶层调用， use 可以在条件语句如 if 和循环如 for 内调用。相比之下， use 比 useContext 更加灵活。

import { use } from 'react';

function Button() {
  const theme = use(ThemeContext);
  // ...

use 返回传递的 context 的 context 值 。React 会搜索组件树并找到 最接近的 context provider 以确定需要返回的 context 值。

如果要将上下文传递给 Button ，请将其或其父组件之一包装在相应的 context provdier 内。

function MyPage() {
  return (
    <ThemeContext value="dark">
      <Form />
    </ThemeContext>
  );
}

function Form() {
  // ……在这里面渲染按钮……
}

无论在 provider 和 Button 之间有多少层组件，都不会有影响。当 Form 内的任何位置的 Button 调用 use(ThemeContext) 时，它将接收到值为 "dark" 。

不同于 useContext ， use 可以在条件语句和循环中调用，比如 if 。

function




    
 HorizontalRule({ show }) {
  if (show) {
    const theme = use(ThemeContext);
    return <hr className={theme} />;
  }
  return false;
}

if 语句内部调用了 use ，允许有条件地从 context 中读取值。