使用 useAtom 读取和写入原子

useAtom(someAtom) 返回 [value, setter]，与 useState 接口相似。值是当前的原子状态；设置函数会更新它。当组件既要读取原子又要写入原子时，请使用此钩子。

设置函数既可以接收新值，也可以接收更新函数：setCount(c => c + 1)。

useAtomValue(someAtom) 只返回当前值，不提供设置函数。当组件只读取状态而从不修改状态时，请在仅用于显示的组件中使用它。

由于组件不持有设置函数引用，代码清楚地表达了其意图：这是一个纯读取组件。

useSetAtom(someAtom) 只返回设置函数。关键在于，它不会让组件订阅原子的值。原子发生变化时，组件不会重新渲染。

对于按钮这类仅执行操作的组件，请使用它们：这类组件会分发状态更改，但不会显示任何派生界面。

调用 useSetAtom(countAtom) 来增加计数器的组件，在 countAtom 发生变化时不会重新渲染，因为它没有订阅值。只有显示计数的组件会重新渲染。

这是一个简单但强大的优化：将写入方与读取方解耦，避免级联重新渲染。

从 jotai/utils 导入 atomWithStorage。它的用法与 atom() 完全相同，但要将存储键作为第一个参数传入：atomWithStorage('theme', 'light')。该原子会自动与 localStorage 同步。

页面重新加载时，该原子会从 localStorage 进行水合。所有读取该原子的组件都会立即获取持久化的值。

可以将 jotai/utils 中的 RESET 符号传给 atomWithStorage 原子的设置函数：setter(RESET)。这会清除 localStorage 条目，并将原子重置为其初始值。

在设置页面中，这适用于注销流程或“重置为默认值”按钮。

jotai/utils 中的 atomFamily 会创建一个工厂函数，该函数返回参数化原子。例如，atomFamily(id => atom(null)) 会为传入的每个唯一标识符创建一个单独的原子。

对于 selectedAtom(itemId) 或 expandedAtom(rowId) 这类按项目管理的状态，这种方式非常理想，无需维护一个庞大的映射原子。

如果标识符不断累积，原子族可能会无限增长。请使用 atomFamily.setShouldRemove((createdAt, param) => ...) 定义清理谓词，Jotai 会在决定淘汰过期的原子族成员时调用它。

对于项目会不断添加和删除的列表，请在删除项目时始终清理原子族条目，以避免内存泄漏。

jotai-devtools 软件包提供一个可视化面板，用于列出所有活动原子及其当前值。安装该软件包后，将应用包装在 DevTools 中，即可实时检查原子状态。

每次原子更新都会记录更新前后的值，因此调试复杂的原子交互会变得非常直接。

在大型列表中，ListContainer 组件可以使用 useSetAtom(selectedIdAtom) 更新选择状态，而无需订阅 selectedIdAtom。只有调用 useAtomValue(selectedIdAtom) 的各个 ListItem 组件会在选择状态变化时重新渲染。

这种模式具有良好的扩展性：添加数千个列表项目也不会拖慢选择状态的更新。

请选择与组件需求相匹配的钩子：纯显示使用 useAtomValue，纯操作使用 useSetAtom，需要读写两者时使用 useAtom。这种有意识的接口设计让组件的职责一目了然。

表单字段组件通常使用 useAtom；提交按钮使用 useSetAtom；显示计数的标签使用 useAtomValue。

使用 useSetAtom 而不是 useAtom 的主要优势是什么？

useAtom 同时提供值和设置函数；useAtomValue 只提供值（读取订阅）；useSetAtom 只提供设置函数（值发生变化时不会重新渲染）。atomWithStorage 会将状态持久化到 localStorage，并支持 RESET；atomFamily 会为动态列表创建按参数区分的原子。

选择正确的钩子可以最大限度地减少不必要的重新渲染，并明确表达组件的意图。