嵌套 React Context Provider 并使用 useContext 是一个问题吗？

Question

使用深度嵌套的 React 上下文提供程序会遇到什么问题？

const AllContextProvider = props => {
  return (
    <UserProvider>
      <ThemeProvider>
        <NotifProvider>
          <TimelineProvider>
            <CertProvider>
              <MenusProvider>
              {props.children}
              </MenusProvider>
            </CertProvider>
          </TimelineProvider>
        </NotifProvider>
      </ThemeProvider>
    </UserProvider>
  );
};

并像这样使用具有上下文依赖关系的嵌套提供程序：

import React, { useContext } from "react";
import { UserContext } from "./UserContext";
import { useLocalStoragePerUser } from "./useLocalStoragePerUser";

const MenusContext = React.createContext();
const { Provider } = MenusContext;

const MenusProvider = props => {
  // Is this context dependencie always "re-trigger" the Menu Context Provider?
  const { user } = useContext(UserContext);

  // Menus Context
  const [menu, setMenu] = useLocalStoragePerUser( "menus", {
      icons: false,
      labels: true,
      leftMenu: true,
    },
    user
  );

  return (
    <Provider value={{ menu, setMenu}} >
      {props.children}
    </Provider>
  );
};

export { MenusProvider, MenusContext };

这种上下文依赖是否总是“重新触发”菜单上下文提供程序？ => 特别是关于无用的重新渲染？

Answer 1

嵌套上下文不会导致代码出现任何问题。在上述情况下，如果您在MenuContext 中订阅UserContext，则MenuContext 只会在UserContext 更改提供给其提供者的值时重新呈现。但是，除非 MenuContext 更改它传递给 MenuContext Provider 的值，否则订阅 MenuContext 的子代不会重新渲染，也不会重新渲染其他子代

import React from "react";
import ReactDOM from "react-dom";
import { UserProvider } from "./UserProvider";
import { ThemeProvider } from "./ThemeProvider";
import { MenusProvider } from "./MenuProvider";

import "./styles.css";
function Child() {
  console.log("Child render");
  return <div>Menus Child</div>;
}
function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <UserProvider>
        <ThemeProvider>
          <MenusProvider>
            <Child />
          </MenusProvider>
        </ThemeProvider>
      </UserProvider>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

你可以看到一个DEMO in the codeSandbox here

P.S. 但是，您必须确保您没有创建新对象 同时将值传递给提供者，否则每次提供者 重新渲染所有订阅其上下文的子节点将重新渲染