如何使用 RecoilJS 构造一个深度嵌套的状态树？

Question

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

Answer 1

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

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

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

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

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

只有订阅了 carsMileage atom 的组件会在 atom 更改时重新渲染，但是您不能让组件只显示 teslaModel3 的里程而不重新渲染-当 chevroletCorvette 的里程数发生变化时渲染（也与选择器系列无关）。相反，一个仅包含里程数的原子族

{
  miles: 50.000
}

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

详尽无遗：原子家族的唯一缺点是 Recoil 无法帮助您记住用于存储数据的键（teslaModel3 和 chevroletCorvette）...您必须将密钥存储在另一个原子中，否则你就不走运了。

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

如何使用 RecoilJS 构造一个深度嵌套的状态树？

How would one structure deep nested state tree with RecoilJS?

reactjs

recoiljs