Reactjs 将上下文拆分为状态并进行更新以提高性能（减少渲染）？

一些博客文章在使用反应上下文时，将上下文分为两个单独的更新和状态上下文。我想知道这是真的提高了性能还是会减少渲染周期

因此，最终解决方案将包括：

• 两个不同的上下文对象
• 两个不同的钩子用于1.）访问状态和2.）修改状态
• 两个独立的提供程序（包装成一个单独的提供程序，如

  AuthProvider

  ）

解决方案拆分更新和状态上下文：

const authContext=React.createContext（未定义）
const authUpdateContext=React.createContext（null）
导出函数useAuth（）{
const authUser=React.useContext（authContext）；
如果（authUser==未定义）抛出新错误（`useAuth必须在ContextAuthProvider`中使用）；
返回authUser；
}
导出常量useAuthUpdate=（）=>{
const setAuthUser=React.useContext（authUpdateContext）；
如果（！setAuthUser）抛出新错误（`useAuthUpdate必须在AuthProvider`中使用）；
返回setAuthuser；
}
导出常量AuthProvider:React.FC=（{children}）=>{
常量[authUser，setAuthUser]=useState（null）
返回(
{儿童}
)
}
//仅在需要的组件中使用（两个组件中的一个或两者的组合）
const authUpdate=useAuthUpdate（）
const auth=useAuth（）

您需要了解的重要一点是，当上下文的值更改时，订阅到特定上下文的任何组件都会重新呈现。

---

回到您的问题，使用不同的钩子来更新和检索状态值是没有意义的，因为两者都连接到上下文提供程序。我希望这是有道理的。更多详细信息

上下文的操作往往不会更改，而这些操作控制的状态会更改。如果创建同时提供状态值和状态更新方法的单个上下文，则每次状态值更改时，将在订阅该上下文的所有组件上触发渲染，即使它们仅访问操作（可能未更改）

通过将上下文拆分为两个单独的上下文（如示例中所示），可以避免这种情况，并在仅订阅actions上下文的组件上保存渲染（以及相关的副作用，如useEffect（）调用）

这里有一个相关的问题：这清楚地说明了这一点。如果在该示例中仅使用了一个上下文，那么ActionsComponent中的useEffect将在ValueComponent中计数器的每个勾号上触发，但不会触发，因为每个组件都订阅了不同的上下文

---

下面是关于React-repo的一个问题：使用React.memo和useContext钩子防止重播的简要概述#15156:

上下文的操作往往不会改变，而这些操作控制的状态会改变。如果不拆分它们，则每次状态更改时，将在订阅上下文的所有组件上触发渲染，即使它们仅访问可能未更改的操作。这里有一个相关的问题：你能检查一下答案吗？答案似乎遗漏了你正在做的事情。您完全可以在只订阅actions上下文的组件上保存渲染（以及相关调用，如useEffect）。我联系的相关问题清楚地表明了这一点。如果在该示例中仅使用了一个上下文，则ActionsComponent中的useEffect将在ValueComponent中计数器的每个勾号上触发，但不会触发，因为每个组件都订阅了不同的上下文。谢谢，你想把它放在一个答案中，以便其他人可以快速看到正确的答案吗？OP声明两个独立的上下文，并在一个上下文中传递状态值，在另一个上下文中传递状态修饰符。这些是独立的上下文，更改值上下文上的值不会影响操作上下文，因此订阅操作上下文的组件不会在值更改时触发渲染。