派生原子与异步原子
从其他原子组合出派生原子,并创建与 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 反馈 — 无需本地设置。