React 的常用 Hook 之 use

use()

这个钩子可以接受Promise和context

你可以在你的服务器组件中创建一个Promise，然后传递给客户端组件，在客户端组件中用use(xxPromise)来解析传递进去的promise，一般是搭配Suspense或者ErrorBoundary进行使用的：

"use client";

import { use, Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

export function MessageContainer({ messagePromise }) {
  return (
    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
      <Suspense fallback={<p>⌛Downloading message...</p>}>
        <Message messagePromise={messagePromise} />
      </Suspense>
    </ErrorBoundary>
  );
}

function Message({ messagePromise }) {
  const content = use(messagePromise);
  return <p>Here is the message: {content}</p>;
}

执行效果：

用法

简单说明就是，这个钩子必须要在React组件或者Hook中使用，下面这种用法是错的：

function MessageComponent({messagePromise}) {
  function download() {
    // ❌ 调用 `use` 的函数不是组件或者 Hook
    const message = use(messagePromise);
    // ...

这种是对的：

function MessageComponent({messagePromise}) {
  // ✅ `use` 正在组件内被调用
  const message = use(messagePromise);
  // ...