React.js ~用于解决缓存问题的 use() 钩子~

2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

大多数教程到此为止。但是，如果你尝试在客户端组件内部创建的承诺（Promise）上使用 use()，你会遇到一个微妙且令人沮丧的错误。

// 错误：每次渲染都会创建一个新的承诺
function 用户资料({ 用户ID }: { 用户ID: 字符串 }) {
  const 用户 = use(获取用户(用户ID)); // 每次渲染都产生新承诺
  return <资料卡片 用户={用户} />;
}

获取用户(用户ID) 在每次渲染时都会返回一个新的承诺对象。React 检测到这是一个新的承诺，再次挂起，导致组件重新渲染，进而又创建另一个新的承诺，再次挂起，形成无限循环。

use() 并不获取数据，它读取的是一个承诺。该承诺必须在多次渲染之间保持身份稳定。如果你在每次渲染时都创建一个新的承诺，就会导致无限的挂起循环。

如何稳定承诺
有几种方法，每种方法适用于不同的架构：

1. 在父组件或服务器组件中创建承诺

// 服务器组件 - 承诺仅创建一次，在多次渲染间保持稳定
export default function 用户页面({ 参数 }: { 参数: { id: 字符串 } }) {
  const 用户承诺 = 获取用户(参数.id);

  return (
    <Suspense fallback={<Skeleton />}>
      <用户资料 用户承诺={用户承诺} />
    </Suspense>
  );
}

不需要使用 async/await，承诺以未解析的状态向下传递。客户端组件使用 use() 对其进行解包。由于服务器组件不会重新渲染，因此承诺的引用天然是稳定的。

免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。