React：避免仅用dispatch的组件因useContext触发重渲染的方案咨询

问题背景 #

我正在构建一个组件树，状态的控制器可能嵌套在树的深层，或者与状态消费者处于同级节点。因此我在顶层使用Context.Provider包裹state和dispatch函数，在控制器组件内通过useContext获取dispatch。
现在的问题是，调用dispatch时会导致Context.Provider的state变化，进而引发控制器组件重渲染，但该组件仅使用dispatch，这种重渲染应被避免。

示例代码：

const Context = React.createContext();

const AppContext = ({ children }) => {
  const [state, setState] = useState(true);
  return (
    <Context.Provider value={{ state, setState }}>
      {children}
    </Context.Provider>
  );
};

const ControllerButton = () => {
  const { setState } = useContext(Context); // only setState is called
  const onClick = () => {
    setState(oldState => !oldState);
  }
  // assume there are some other expensive computations so I would like to prevent it from rerendering
  return <button onClick={onClick}>Toggle</button>;
}

const App = () => {
  return (
    <AppContext>
      <ControllerButton/>
      {/* ...consumers of state */}
    </AppContext>
  );
}

问题1：针对我的需求（dispatch调用者与state消费者在复杂组件树中位置分散），是否应使用useContext实现？是否有更优方案？ #

• 使用useContext完全适配你的场景，它的核心作用就是解决跨组件层级的状态/方法传递，避免繁琐的props drilling，代码维护性更强。
• 更优方案需结合场景选择：
  • 若状态逻辑复杂（包含多action、异步操作等），可以选用Zustand、Jotai或Redux这类状态管理库。其中Zustand和Jotai轻量化，无需大量模板代码，且内置了重渲染优化；Redux则更适合大型应用的全局状态管理。
  • 若只是简单的状态传递，useContext足以满足需求，无需引入额外库增加复杂度。

问题2：若必须使用useContext，拆分出两个Context（分别管理state和dispatch）是否为良好实践？ #

这是非常推荐的最佳实践。

• 原单Context同时包含state和setState，每次state更新时，Context的整个value都会变化，所有消费该Context的组件都会触发重渲染——哪怕只用到setState的组件也无法幸免。
• 拆分后：
  • StateContext仅传递state，只有依赖state的组件会在state更新时重渲染；
  • SetStateContext仅传递setState（useState返回的setState是稳定函数，不会随state变化而更新），因此消费该Context的组件（如ControllerButton）不会因state变化触发不必要的重渲染。

修正你示例中的小错误，正确代码如下：

const StateContext = React.createContext();
const SetStateContext = React.createContext();

const AppContext = ({ children }) => {
  const [state, setState] = useState(true);
  return (
    <StateContext.Provider value={state}>
      <SetStateContext.Provider value={setState}>
        {children}
      </SetStateContext.Provider>
    </StateContext.Provider>
  );
};

使用时，ControllerButton仅消费SetStateContext：

const ControllerButton = () => {
  const setState = useContext(SetStateContext);
  const onClick = () => {
    setState(oldState => !oldState);
  }
  return <button onClick={onClick}>Toggle</button>;
}

问题3：使用React.memo降低重渲染成本是否为良好实践？ #

是，但要注意正确用法。

• 你示例中的写法有误：React.memo应该包裹组件定义，而非在渲染时动态创建组件。正确写法如下：

const ControllerButtonInner = React.memo(({ setState }) => {
  const onClick = () => {
    setState(oldState => !oldState);
  }
  return <button onClick={onClick}>Toggle</button>;
});

const ControllerButton = () => {
  const { setState } = useContext(Context);
  return <ControllerButtonInner setState={setState}/>;
}

• 原理：React.memo会对组件props做浅比较，若props未变化则跳过重渲染。由于useState返回的setState是稳定函数，ControllerButtonInner的props不会随state更新而变化，因此能避免不必要的重渲染。
• 局限性：这种方案不如拆分Context彻底。如果ControllerButton本身依赖父组件的其他变化，或Context中包含其他不稳定值，React.memo可能失效。拆分Context是从根源上避免了不必要的Context更新，可靠性更强。

问题4：是否存在其他避免该组件重渲染的方法？ #

还有几种可行方案：

1. 使用useReducer替代useState
useReducer返回的dispatch函数是稳定的，不会随state变化而更新。可以将state和dispatch放在同一个Context中，配合React.memo就能让消费dispatch的组件避免重渲染：

   const reducer = (state, action) => {
     switch(action.type) {
       case 'TOGGLE': return !state;
       default: return state;
     }
   };
   
   const Context = React.createContext();
   
   const AppContext = ({ children }) => {
     const [state, dispatch] = useReducer(reducer, true);
     return (
       <Context.Provider value={{ state, dispatch }}>
         {children}
       </Context.Provider>
     );
   };
   
   const ControllerButton = React.memo(() => {
     const { dispatch } = useContext(Context);
     const onClick = () => dispatch({ type: 'TOGGLE' });
     return <button onClick={onClick}>Toggle</button>;
   });
   

2. 用useMemo缓存Context的value（针对自定义dispatch）
   若你使用自定义的dispatch函数（而非useState的setState），可以用useMemo缓存Context的value，确保仅在必要时更新：

   const AppContext = ({ children }) => {
     const [state, setState] = useState(true);
     const toggle = useCallback(() => setState(old => !old), []);
     // 仅在state或toggle变化时更新value
     const value = useMemo(() => ({ state, toggle }), [state, toggle]);
     return <Context.Provider value={value}>{children}</Context.Provider>;
   }
   

   此时消费toggle的组件配合React.memo也能避免重渲染，但这种方式不如拆分Context直观。

内容的提问来源于stack exchange，提问作者D-Y