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

Question

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

有了上下文，我可以这样做：

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

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

有了后座力，我必须：

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,
    // ...
  }
})

我不知道你说的“有没有更好的办法”是什么意思。我的猜测是，您指的是一个整体解决方案，但反冲的全部要点是分割您的全局整体整体状态，并以原子方式使用它。否则，使用反冲没有实际的好处。

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