0Pricing
React Academy · 课时

派生原子与异步原子

从其他原子组合出派生原子,并创建与 Suspense 集成的异步原子

派生原子与异步原子 是 CoddyKit 上的免费 React Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

只读派生原子

通过传入获取函数来创建派生原子:const doubleAtom = atom(get => get(countAtom) * 2)。该原子没有存储值;每当 countAtom 发生变化时,它都会重新计算。

派生原子始终保持最新状态,无需任何手动同步。它们相当于 Jotai 中的计算属性。

自动依赖跟踪

Jotai 会跟踪获取函数内部访问过的原子,并在其中任意一个发生变化时自动重新计算派生原子。您无需显式声明依赖项。

如果获取函数调用 get(atomA) 和 get(atomB),那么只要 atomA 或 atomB 发生变化,派生原子就会更新。

可写派生原子

可写派生原子同时具有获取函数和设置函数:atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase()))。读取时会得到转换后的值;写入时会进行转换并存回原子。

这种模式可以实现双向数据转换,同时无需直接暴露基础原子。

使用 Promise 的异步原子

获取函数可以是异步函数:const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); })。Jotai 原生接受原子获取函数返回的 Promise。

当 userIdAtom 发生变化时,Jotai 会自动重新运行异步获取函数,而使用该原子的组件会在获取数据期间暂停。

异步原子与 React Suspense

异步原子可以与 React Suspense 无缝集成。请将使用该原子的组件包装在带有后备内容的 Suspense 边界中。Promise 处于等待状态时,组件会暂停;Promise 解析后,组件会渲染。

这样可以免去在组件中手动管理加载状态:无需 isLoading 标志,也无需使用 useEffect 获取数据。

loadable:退出 Suspense

从 jotai/utils 导入 loadable。包装一个异步原子:const loadableUserAtom = loadable(userAtom)。读取 loadableUserAtom 的组件会收到 {state: 'loading'}、{state: 'hasData', data: user} 或 {state: 'hasError', error},而不会暂停。

当您需要在组件内部直接渲染自定义加载状态,而不是依赖 Suspense 边界时,请使用 loadable。

重置原子

jotai/utils 中的 atomWithReset 工具函数会创建一个可以使用 RESET 符号重置为初始值的原子。与手动跟踪并重新应用初始值相比,这种方式更加简洁。

在表单中,可以在提交或取消时,在同一个处理函数中为每个字段原子的设置函数调用 RESET,从而重置所有字段原子。

串联原子

派生原子可以读取多个其他原子:const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) }))。这样会创建一个稳定的单一引用,并在任意依赖发生变化时更新。

只需要摘要的组件可以订阅 summaryAtom,而不必订阅三个独立的原子。

条件原子

派生原子可以有条件地读取不同的原子:const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom))。当 modeAtom 切换时,派生原子会自动切换其数据源。

Jotai 会在每次求值时重新订阅正确的原子,确保不会读取非活动分支中的过期数据。

异步原子错误处理

如果异步原子的获取函数抛出错误或被拒绝,那么在与 Suspense 一起使用时,错误会传播到最近的 React 错误边界。使用 loadable 时,错误会出现在 state.error 字段中,以便在组件内部处理。

在生产代码中,请始终为异步原子配对使用 ErrorBoundary 或 loadable 包装器。

派生原子的性能

派生原子会记忆化上一次的结果。如果所有依赖原子返回的值都与上一次求值相同,派生原子就会返回相同的引用,并且不会触发下游重新渲染。

对于开销较大的派生操作(例如大型数组转换),这种记忆化无需额外配置即可带来显著的性能收益。

异步原子与 Suspense 集成

当 Promise 处于等待状态时,读取异步原子的组件会发生什么?

课程回顾

派生原子通过带有自动依赖跟踪的获取函数,根据其他原子计算值。异步原子使用异步获取函数,默认与 React Suspense 集成;使用 jotai/utils 中的 loadable 可以退出 Suspense,并在组件内部直接处理加载和错误状态。

可写派生原子支持双向转换,条件原子则会根据其他原子的值动态切换数据源。

常见问题解答

「派生原子与异步原子」课时是免费的吗?

是的 — 「派生原子与异步原子」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 React Academy 课程的其余内容,请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「派生原子与异步原子」这节课中我会学到什么?

从其他原子组合出派生原子,并创建与 Suspense 集成的异步原子 你通过在浏览器中直接运行的动手代码来练习 React Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。

「派生原子与异步原子」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗?

能。每节 React Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 原子:Jotai 中的状态单元
  2. 使用 useAtom 读取和写入原子
  3. 派生原子与异步原子
  4. Jotai、Zustand 与 Context:如何选择
← 返回 React Academy