如何使用 RecoilJS 构建深层嵌套状态树？

Question

如何使用 RecoilJS 构建深层嵌套状态树？我应该将每个分支作为单独的原子还是其他什么？

Answer 1

如果您不将结构拆分为原子，则您将无法利用最重要的 Recoil 功能：仅更新订阅原子的 UI 组件。如果您有一个 Atom，则每次更新 Atom 时，所有 UI 都会重新渲染。如果不将结构拆分为原子，那么使用 React Context 和使用 Recoil 之间没有区别。

相反，将数据拆分为原子和原子族（以及选择器和选择器族）可以让您充分利用 Recoil。当原子更新时，只有订阅特定原子的组件才会重新渲染！

原子和原子族有什么区别？为什么利用它们而不仅仅是原子（最终使用选择器系列）如此重要？

嵌套原子和原子族有一个共同点：它们允许您管理嵌套数据结构，例如，将里程数据存储在原子中：

// carsMileage atom structure
{
  teslaModel3: {
    miles: 50.000
  },
  chevroletCorvette: {
    miles: 100.000
  }
}

只有订阅了原子的组件才会carsMileage在原子更改时重新渲染，但是不能有一个仅显示 的里程的组件，当的里程发生更改teslaModel3时不会重新渲染（也不适用于选择器系列）。chevroletCorvette相反，一个仅包含里程的原子族

{
  miles: 50.000
}

teslaModel3通过具有两个键 (和)的原子系列进行管理，chevroletCorvette允许您让组件订阅它们也感兴趣的原子。更新teslaModel3里程不会导致ChevroletCorvetteData组件重新渲染。请注意，从数据的角度来看，原子和原子族都只是嵌套对象，仅此而已。

详尽地说：原子系列的唯一缺点是 Recoil 不能帮助您记住用于存储数据的密钥 (teslaModel3和chevroletCorvette)...您必须将密钥存储在另一个原子中，否则您就不走运了。

最后：不，不要对所有数据使用单个原子，如果你想这样做，你可以完全避免反冲