如何实现React Context值更新时的组件条件重渲染优化

问题根因 #

原生React.useContext只要Context的value引用发生变化，所有消费该Context的组件都会强制重渲染，和组件实际用到的属性无关，这就是你遇到的CounterA、CounterB同时重渲染的原因。

实现方案 #

我们可以通过订阅模式+自定义选择器钩子实现按需重渲染，完全符合你要求的调用形式： #

第一步：改造Context Provider为可订阅模式

import React, { useState, useRef, useEffect, useCallback } from 'react';

const CounterContext = React.createContext();

const CounterProvider = ({children}) => {
  // 合并状态统一管理
  const [state, setState] = useState({
    counterA: 0,
    counterB: 0
  });
  // 用ref存储最新状态，避免订阅回调拿到旧值
  const stateRef = useRef(state);
  // 存储所有订阅更新的回调函数
  const subscribersRef = useRef([]);

  // 状态变化时通知所有订阅者
  useEffect(() => {
    stateRef.current = state;
    subscribersRef.current.forEach(cb => cb());
  }, [state]);

  // 订阅方法，返回取消订阅的函数
  const subscribe = useCallback((cb) => {
    subscribersRef.current.push(cb);
    return () => {
      subscribersRef.current = subscribersRef.current.filter(item => item !== cb);
    };
  }, []);

  // 获取最新状态的方法
  const getState = useCallback(() => stateRef.current, []);

  // 封装状态修改方法
  const setCounterA = useCallback((val) => {
    setState(prev => ({...prev, counterA: typeof val === 'function' ? val(prev.counterA) : val}));
  }, []);
  const setCounterB = useCallback((val) => {
    setState(prev => ({...prev, counterB: typeof val === 'function' ? val(prev.counterB) : val}));
  }, []);
  const reset = useCallback(() => setState({counterA:0, counterB:0}), []);

  return (
    <CounterContext.Provider value={{getState, subscribe, setCounterA, setCounterB, reset}}>
      {children}
      <button onClick={() => setCounterA(prev => prev + 1)}>Counter A ++</button>
      <button onClick={() => setCounterB(prev => prev + 1)}>Counter B ++</button>
      <button onClick={reset}>reset</button>
    </CounterContext.Provider>
  )
}

第二步：实现自定义useContextSelector钩子

function useContextSelector(context, selector, isEqual = (a, b) => a === b) {
  const ctx = React.useContext(context);
  if (!ctx) throw new Error('useContextSelector 必须在对应Provider内部使用');

  // 仅当选择器返回的结果变化时才触发重渲染
  const [selectedValue, setSelectedValue] = useState(() => selector(ctx.getState()));
  const selectedRef = useRef(selectedValue);

  useEffect(() => {
    const checkUpdate = () => {
      const newValue = selector(ctx.getState());
      // 对比新旧值，变化才更新状态
      if (!isEqual(newValue, selectedRef.current)) {
        selectedRef.current = newValue;
        setSelectedValue(newValue);
      }
    };
    const unsubscribe = ctx.subscribe(checkUpdate);
    return unsubscribe;
  }, [ctx, selector, isEqual]);

  return selectedValue;
}

扩展说明：第三个参数isEqual支持自定义对比逻辑，比如传入lodash.isEqual实现深比较，满足复杂对象的对比需求。

第三步：组件中按需调用

完全符合你期望的伪代码形式：

const CounterA = () => {
  // 仅选择counterA，只有counterA变化时才重渲染
  const counterA = useContextSelector(CounterContext, state => state.counterA);
  console.log('CounterA re-render');
  return <p>Counter A: {counterA}</p>;
}

const CounterB = () => {
  // 仅选择counterB，只有counterB变化时才重渲染
  const counterB = useContextSelector(CounterContext, state => state.counterB);
  console.log('CounterB re-render');
  return <p>Counter B: {counterB}</p>;
};

// 你需要的条件重渲染能力实现示例
const MyComponent = () => {
  // 只有value.property等于42时，选择器返回结果才会变化，触发组件重渲染
  const isPropertyEqual42 = useContextSelector(MyContext, value => value.property === 42);
  // 其他逻辑
};

const App = () => {
  return (
    <CounterProvider>
      <CounterA />
      <CounterB />
    </CounterProvider>
  )
};

注意事项 #

• 传入useContextSelector的选择器函数需要保持稳定引用，建议定义在组件外部或者用useCallback包裹，避免频繁触发订阅/取消订阅操作。
• React 18实验版本已经内置官方useContextSelector API，功能和上述自定义实现一致，生产环境可以直接使用。
• 大型高性能项目也可以直接使用Redux、Zustand等成熟状态管理库，它们原生内置了选择器按需重渲染能力，不用自己封装。

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