使用 React Hook 应用多个上下文的好方法答案

【问题标题】：Good way to apply multiple Context with React Hook使用 React Hook 应用多个上下文的好方法
【发布时间】：2019-10-03 08:12:16
【问题描述】：

目前，我有 CategoryContext 来管理类别状态，用于管理 Modal 状态的 ModalContext。

<Layout>
   <ModalContext.Provider>
   <Route>
       <CategoryContext.Provider />
           <CategoryPage />
   </Route>
   <ModalContext.Provider />
</Layout>

我只是从 redux 转到 react-hook 来管理状态。那我不确定我的解决方案好不好？我很高兴从社交中获得更多想法:)

【问题讨论】：

不确定从 redux 转移到 hook 是什么意思，因为您可以将 redux 与 hooks 一起使用。我认为您的意思是用上下文替换了 redux。
是的，我正在尝试通过挂钩来使用所有内容。目前我正在使用 { useContext, useReducer } 来模拟 redux。但我的问题集中在我们管理多个上下文的方式上。当我有更多上下文时，哪种方式可以使应用程序更具可扩展性
这可能不是很好地使用上下文。上下文的想法是允许多个组件访问该状态，但如果您只为一个组件设置上下文，则最好在组件内使用useState 或useReducer。另一方面，如果您希望类别上下文中的状态可用于加载其他组件，则最好使用单个应用程序上下文来包含模态和类别状态，然后分派给它。
不错@Andy。在我的示例中，我只展示了一个小案例。他们在 react-hook 文档中写道：“当上下文值发生变化时，调用 useContext 的组件将始终重新渲染。如果重新渲染组件的成本很高，您可以使用 memoization 对其进行优化。”然后我不想只使用一个上下文。示例如果我有模态上下文、客户上下文，并且我将它们全部放在应用程序上下文中，那么如果某个组件只需要使用客户上下文，那么当模态上下文状态发生变化时，就会受到影响。 github.com/facebook/react/issues/15156#issuecomment-474590693中首选拆分上下文@
要优化 redux 应用程序，您可以 memoize mapStateToProps（钩子版本是 useSelector）并使用 React.memo 或使用容器中的 useMemo 调用它们使表示组件成为纯组件。 react-redux hooks 容器的示例是here，它使用自制软件，但具有与 react-redux hooks 相同的 API。

标签： javascript reactjs react-hooks

【解决方案1】：

您可以有多个上下文提供程序来包装您希望在其中使用上下文的组件。但是，在您的情况下，您没有用提供程序包装组件，而只是在CategoryContext 的情况下呈现它

<Layout>
   <ModalContext.Provider>
   <Route>
       <CategoryContext.Provider >
           <CategoryPage />
       </CategoryContext.Provider >
   </Route>
   <ModalContext.Provider />
</Layout>

【讨论】：

是的，我将类别组件放入 2 Context.Provider 中，然后我将在组件中使用上下文。在类别组件中，我可以从模态和类别上下文中获取状态。但是如果我以后有更多上下文，我不确定这是一个好方法
@NghiNguyen 您可以拥有尽可能多的上下文，并将它们本地化到需要该上下文值的组件的公共父级。不必只有一个上下文
我正在考虑通过组合多个上下文进行管理。现在我得到了 ModalContext ，它将在全球范围内使用。但也许将来我会有 SessionContext 它也将应用于整个应用程序。我不想在 App 中使用很多嵌套级别。对于这种情况，你有什么解决办法吗？
这种情况下的解决方案是将多个上下文组合成一个适用于整个应用程序的上下文，或者具有一个管理和呈现多个上下文的包装器。但是我仍然建议您拥有多个上下文，因为您可以本地化逻辑
听起来很棒！我没有考虑逻辑。你能给我一个例子吗？谢谢:)