React中useContext与useReducer使用时的性能问题及解决方法咨询

useContext 触发消费组件重渲染的根本原因是：只要 Context 提供的value引用发生变化，所有消费该 Context 的组件都会触发重渲染，和组件实际是否用到了变化的状态字段无关。以下是可落地的优化方案，刚好适配你正在调研的useReducer使用场景：

核心优化手段 #

• 拆分细粒度 Context
  不要把所有全局状态都塞到同一个大 Context 中，按业务模块、状态相关性拆分成多个独立的小 Context，比如用户状态Context、主题配置Context、全局配置Context等。只有对应 Context 的值发生变化时，才会触发消费该 Context 的组件重渲染，互不影响。
• Context 的value使用useMemo缓存
  这是初学者最容易踩的坑：不要直接给Context.Provider的value赋值字面量对象，比如value={{ state, dispatch }}，这种写法每次 Provider 组件重渲染时都会生成新的对象引用，哪怕state没有任何变化也会触发所有消费组件重渲染。正确写法是用useMemo缓存 value：

  const contextValue = useMemo(() => ({ state, dispatch }), [state, dispatch])
  return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>
  

  由于useReducer返回的dispatch引用是永久稳定的，所以只有state发生变化时，contextValue才会更新。
• 拆分状态Context和DispatchContext
  适配useReducer的最优实践之一：把状态和调度函数拆分到两个独立的Context中。只需要触发状态更新、不需要读取状态的组件，只消费DispatchContext即可，dispatch引用永远稳定，这部分组件永远不会因为Context状态更新触发重渲染：

  const StateContext = createContext(null);
  const DispatchContext = createContext(null);
  
  // Provider 中使用
  const [state, dispatch] = useReducer(reducer, initialState);
  const stateValue = useMemo(() => state, [state]);
  return (
    <StateContext.Provider value={stateValue}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  )
  

• 封装自定义选择器Hook
  如果不想拆分Context，可以自己封装类似Redux的useSelector逻辑，自定义Hook监听Context中指定字段的变化，只有对应字段更新时才让消费组件重渲染，不需要用到的字段变化不会触发更新。
• 消费组件用React.memo包裹
  如果消费组件接收的 props 都是稳定值，用React.memo包裹组件可以在Context未变化时，避免组件因为父组件重渲染连带重渲染。

useReducer 配合 Context 的额外优势 #

useReducer的状态更新逻辑收敛在reducer函数中，状态转换可预测，同时dispatch的稳定引用特性天然适配Context的优化场景，不需要额外用useCallback包裹就可以直接放到Context中传递，适合中大型项目的全局状态管理。

内容的提问来源于stack exchange，提问作者Char