Javascript 使用React钩子应用多个上下文的好方法

目前,， 我有CategoryContext来管理类别状态， 用于管理模式状态的ModalContext

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

---

我刚从redux转到react hook来管理状态。那么我不确定我的解决方案是好是坏？我很高兴从social获得更多的想法：）

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

CategoryContext

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

不确定从redux移动到hook是什么意思，因为您可以将redux与一起使用。我想你的意思是你用上下文替换了redux。是的，我试着用钩子来使用一切。目前我正在使用{useContext，useReducer}来模拟redux。但我的问题集中在我们管理多重环境的方式上。当我有更多的上下文时，哪种方法可以使应用程序更具可扩展性这可能不是对上下文的良好利用。上下文的概念是允许多个组件访问该状态，但如果您只为一个组件设置上下文，最好在组件内使用

useState

或

useReducer

。另一方面，如果您希望类别上下文中的状态可用于其他组件的加载，则最好使用一个包含模态和类别状态的应用程序上下文，并将其分派到该上下文。Nice catch@Andy。在我的例子中，我只展示了一个小案例。在react hook文档中，他们写道：“当上下文值发生变化时，调用useContext的组件将始终重新呈现。如果重新呈现组件的成本很高，您可以通过使用备忘录对其进行优化。”然后，我不想只使用一个上下文。例如，如果我有模态上下文、客户上下文，并且我将它们全部放在应用上下文中，那么当模态上下文状态发生变化时，如果某个组件只需要使用客户上下文，则会受到影响。在优化redux应用程序时，最好使用拆分上下文。您可以通过使用React.memo或使用容器中的useMemo调用mapStateToProps（钩子版本为useSelector），使呈现组件成为纯组件。react-redux挂钩容器的示例是，它使用自制软件，但具有与react-redux挂钩相同的API。是的，我将我的类别组件放在2个上下文中。然后，我将在组件中使用上下文。在类别组件中，我可以从模态和类别上下文中获取状态。但如果我有更多的背景，我不确定这是一个好方法later@NghiNguyen您可以拥有所需的任意多个上下文，并将这些上下文本地化为需要该上下文值的组件的公共父级。没有必要只有一个上下文，我想通过组合多个上下文来管理。现在我得到了ModalContext，它将在全球范围内使用。但也许将来我会有SessionContext，它也会应用于整个应用程序。我不想在应用程序中使用许多嵌套级别。对于这种情况，您有什么解决方案吗？这种情况下的解决方案是将多个上下文组合成一个适用于整个应用程序的上下文，或者使用一个包装器来管理和呈现多个上下文。然而，我仍然建议您有多个上下文，因为您可以本地化logicSound很棒！我没有考虑过逻辑。你能给我举个例子吗？谢谢：）