React 中的原子状态管理库介绍

介绍

原子状态管理库正在快速增长。正如你在npmtrends的这张图表中看到的那样，两个最著名的库Recoil和Jotai去年几乎无人知晓，而现在每周的下载量分别达到了 24 万次和 3.5 万次：

我还开源了一个名为Particule的新原子库，它有一些有趣的新功能，例如带有钩子的自定义atom函数。

但是什么是原子状态管理？

哈，这个问题问得好。Recoil的文档里有这么一段话：

原子是状态单位。它们可更新且可订阅：当一个原子被更新时，所有订阅的组件都会使用新值重新渲染。

原子代表着你可以在应用程序的任何地方读取和更新的状态。你可以把它想象成一个useState可以在任何组件中共享的状态。

这种方法有很多好处，主要是：

避免不必要的重新渲染和计算

你不再需要通过 传递状态值和更新函数props，也无需从上下文的消费者触发整个组件树。只有订阅了原子值的组件才会更新。

看一下使用Particule的这个例子：

const textAtom = atom('Hello world!')

function Text() {
  const text = useGetAtom(textAtom)

  return <p>{text}</p>
}

// Won't re-render!
function Button() {
  const setText = useSetAtom(textAtom)

  return <button onClick={() => setText('Updated!')}>Update</button>
}

// Won't re-render!
export default function App() {
  return (
    <>
      <Text />
      <Button />
    </>
  )

即使 也使用原子操作， Only<Text />也会重新渲染<Button />。但两者之间有一个区别：<Button /> 不订阅更新，因为它使用useSetAtom并只检索 setter 函数（类似于 中的那个）useState。相反，<Text />则订阅了更新，因为它使用useGetAtom来检索值。

由其他原子组成原子

派生（或组合）原子是由其他原子组成的原子。它们订阅它们所依赖的每个原子，并在需要时自动触发重新渲染。

这可以在 Recoil 中使用选择器来实现，在 Jotai 和 Particule 中则更简单。以下示例就是用Particule实现的：

const eurosAtom = atom(10)
const dollarsAtom = atom(get => get(eurosAtom) * 1.15)

function App() {
  const [euros, setEuros] = useAtom(eurosAtom)
  const [dollars, setDollars] = useAtom(dollarsAtom)

  return (
    <>
      <input onChange={({ target }) => setEuros(target.value)} value={euros} />
      <input onChange={({ target }) => setDollars(target.value)} value={dollars} />
    </>
  )
}

当eurosAtom发生变化时，dollarsAtom由于使用订阅而重新计算get并重新渲染组件一次。

原子状态管理库还有许多其他有趣的主题，例如<Suspense />对异步的支持、atom添加新功能的辅助函数……

因此，如果您想要更多关于此方面的文章，请随意在下面发表评论，您可以查看我提到的库的 GitHub 存储库：

• 颗粒（寻求反馈！）
• Recoil（由 Facebook 创建）
• Jotai（由 Poimandres 创建）