4

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

4

1 回答 1

3

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

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

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

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

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

只有订阅了carsMileageatom 的组件会在 atom 更改时重新渲染，但您不能有一个仅显示 ' 里程的组件在' 里程更改teslaModel3时不会重新渲染（也不能使用选择器系列）。chevroletCorvette相反，一个仅包含里程的原子族

{
  miles: 50.000
}

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

只是为了详尽无遗：原子系列的唯一缺点是 Recoil 不能帮助您记住用于存储数据的键（teslaModel3和chevroletCorvette）...您必须将键存储在另一个原子中，否则您将不走运。

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

于 2020-07-28T07:19:03.827 回答