如何确保在按父级渲染多次时仅创建一次存储

Question

我们有一个嵌入app.js的父应用程序，它将加载它N次(以便同步其他嵌入的应用程序(

代码1，这是我的第一次实现。当应用程序((被加载N次时，存储将被创建N次。我们只想创建一次存储，但可以加载N次。

App.js
---
function App() {
const store = createReduxStore();
return (
<>
<StoreContext.Provider value={store}>
<Component />
</StoreContext.Provider>
</>
);
}

Code 2, store is a ref now, but correct me if wrong, <StoreContext.Provider value {store.current()}>. Store creation still happen N times?
App.js
---
function App() {
// lazy loaded
// https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const store = useRef(() => {
return createReduxStore();
});

return (
<>
<StoreContext.Provider value={store.current()}>
<Component />
</StoreContext.Provider>
</>
);
}

总之，如何确保存储创建只发生过一次，但可以加载N次？

Answer 1

第二个示例中的注释提到了惰性初始状态，但这是useState的一个特性，而不是useRef。因此，代码会将store.current设置为一个函数，然后每次App渲染时，都会有value={store.current()}调用该函数并创建一个新的redux存储。所以你最终还是有N家商店。

我会做以下其中一项。

选项1：使用带有空依赖数组的备忘录

const store = useMemo(() => {
return createReduxStore();
}, []);

选项2：使用带有惰性初始值设定项的状态，并且从不设置状态

const [store] = useState(createReduxStore);