原子：Jotai 中的状态单元

在 Jotai 中，状态被拆分为原子：小型、独立的响应式状态片段。每个原子只保存一个值，并通过 atom(initialValue) 在组件外部创建。

这体现了将状态拆分为最小有意义单元的思维模型，而不是使用一个庞大的存储对象。

当某个原子的值发生变化时，只有订阅了该特定原子的组件会重新渲染。读取其他原子的组件不会受到影响。

这种细粒度响应性是 Jotai 相比 React 上下文的核心优势，因为 React 上下文的值发生任何变化时，所有使用者都会重新渲染。

请在模块级别定义原子：const countAtom = atom(0)。这样可以确保原子标识在多次渲染之间保持稳定，并且不会在每次组件挂载时重新创建原子。

原子是轻量级引用；它们不保存自己的值。值保存在 Jotai 存储中。

默认情况下，Jotai 使用隐式全局存储。您无需将应用包裹在提供器中即可开始使用原子，因此在现有项目中采用起来很简单。

原子可以从组件树中的任意组件访问，无需逐层传递属性或层层传递上下文。

当您需要同一组件树的多个独立实例时（例如两个彼此独立、各自拥有表单状态原子的表单），请将每个实例包裹在 Jotai 提供器中。每个提供器都会创建一个隔离的存储。

这对于微前端架构或包含多个独立状态区域的复杂页面布局很有用。

全局存储会在应用的整个生命周期内保留原子。作用域提供器存储会在提供器卸载时重置，非常适合不应全局持久化的模态对话框或页面级状态。

您甚至可以将自定义存储实例传递给提供器，以实现服务端渲染隔离。

Zustand 使用带有选择器的单一存储对象，以避免不必要的重新渲染。Jotai 将状态拆分为原子，每个组件只订阅它所读取的原子。

对于细粒度的界面状态（单个输入值、切换标志），Jotai 更加自然。对于规模更大且相互关联的应用状态，Zustand 非常合适。

每当上下文值发生变化时，React 上下文都会重新渲染每个使用者组件，即使使用该上下文的组件只关心上下文对象中的一个字段。

Jotai 解决了这个问题：使用 useAtom(nameAtom) 的组件只会在 nameAtom 发生变化时重新渲染，而不会因其他原子的变化而重新渲染。

Jotai 默认使用 Object.is 比较来判断原子的值是否发生变化。如果您将原子设置为它已经持有的相同值，就不会触发重新渲染。

对于复杂对象，请使用 selectAtom 工具从大型原子中派生出稳定的基本类型值，从而避免在无关字段变化时重新渲染。

useState 只属于单个组件。原子可以在整个组件树中共享，无需显式传递。当两个同级组件读取同一个原子时，它们会自动保持同步。

这样既无需为了跨组件共享而提升状态，又能将重新渲染控制在最低限度。

典型的原子包括：const themeAtom = atom('light')、const cartItemsAtom = atom([])、const selectedUserIdAtom = atom(null)。这些原子只定义一次，之后可以在应用中的任意位置导入。

每个原子彼此独立：更新 cartItemsAtom 不会触发只读取 themeAtom 的组件重新渲染。

在重新渲染方面，Jotai 与 React Context 有何不同？

原子是 Jotai 中状态的基本单位，通过在组件外使用 atom(initialValue) 创建。默认情况下，原子可以在整个组件树中共享，无需使用 Provider。当原子发生变化时，只有订阅它的组件会重新渲染。

这种细粒度响应式机制是 Jotai 相比 React Context 的主要优势，其按原子订阅的模型也不同于 Zustand 的单一存储方式。