如何在 React 中使用 RecoilJS 管理大型数据集？

Question

我有一个 React 应用程序，目前使用大约五十个存储在上下文 API 中的变量。我想尝试使用 Recoil 作为替代方案，但我有一个问题。我是否必须将每个变量存储在其自己的原子中，这是否是最佳实践？然后每次我需要使用它时单独导入它？

有了上下文我就可以做到：

const [appState, setAppState] = useState({
    var1: "string",
    var2: "string2",
    var3: false,
    var4: 23,
    ...
})

然后使用 appState 和 setAppState 作为我的上下文提供程序中的值。定义和导入五十个单独的原子有点令人生畏。当然，我不会同时使用全部 50 个，但在使用 Context 之后似乎还是退了一步。

有了后坐力，我将不得不：

export const var1 = atom({key: "var1", default: "string",})
export const var2 = atom({key: "var2", default: "string",})
etc...

然后：

import { var1, var2, var3, ... } from './RecoilAtoms'

有更好的方法吗？

Answer 1

你当然可以只保存在一个原子中：

const appState = atom({
  key: 'appState',
  default: {
    var1: "string",
    var2: "string2",
    var3: false,
    var4: 23,
    // ...
  }
})

我不确定你所说的“有没有更好的方法”是什么意思。我的猜测是，您指的是整体解决方案，但反冲的全部意义在于拆分您的全局整体状态并以原子方式使用它。否则使用后坐力并没有真正的好处。

所以是的，我会把它分成几个原子。

How to manage large datasets with RecoilJS in React?