React createContext和useContext问题

Question

所以我才意识到，每次我更改路由时，App()中的上下文提供程序都在运行。从逻辑上讲是有道理的，但我不确定为什么我从来没有想过。这样做的问题是，每次使用useEffect时，它都会调用api，即使我不需要它，除非我在实际使用它的组件中。

function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Route path="/login" component={Login} />
        <Header />
        <PrivateRoute exact path="/" component={AddClient} />
        <PrivateRoute exact path="/add-client" component={AddClient} />
        <PrivateRoute exact path="/client-list" component={ClientList} />
        <PrivateRoute path="/promo-codes" component={Promo} />
        <TasksProvider>
          <PrivateRoute path="/task-manager" component={TaskManager} />
          <PrivateRoute exact path="/task-manager/:id" component={Modal} />
        </TasksProvider>
      </BrowserRouter>
    </AuthProvider>
  );
}

我最初只尝试在TaskManager中管理单个状态，并从TaskManager传递到模态组件，因为它只有一层深，但这两个组件都使用socket.io来执行实时魔术(？)然后不断地重新渲染并遇到问题(故事太长了)。所以，只要让一个上下文提供程序来完成所有的状态管理工作就行了。

目前，我刚刚填充了一个

if (!window.location.pathname.includes("/task-manager") return;

插入到TasksProvider中的每个useEffect中，以避免该问题。因此，问题是，为了保持类似的结构而不让提供程序每次都运行，我还有哪些其他选择？

Answer 1

根据文档，

当上下文值更改时，调用useContext的组件将始终重新呈现。如果重新呈现组件的开销很大，您可以使用memoization对其进行优化。

为了防止API调用或其他昂贵的计算被触发，您需要将它们放在useMemo或memo中。这确保了只有当依赖项(传递给它们的参数)发生变化时，才会重新计算它们。点击此处了解更多信息https://github.com/facebook/react/issues/15156#issuecomment-474590693