React Context不必要重渲染问题咨询及memo失效疑问

这确实是React Context API的固有特性，核心原因有两个：

1. Context Provider的value变化会触发所有订阅组件重渲染：任何使用useContext(context)的组件，只要Provider的value发生变化，就会无条件重渲染，不管组件有没有用到变化的那部分值。
2. 你当前的Provider每次都会生成新的value对象：Cont组件里，每次状态更新（比如修改C）都会导致Cont重渲染，而你直接在value里写{ A, setA, B, setB, C, setC }，这会创建一个新的对象。因为React是浅比较，哪怕对象里的B值没变化，只要对象引用变了，就会被认为value更新了，进而触发所有订阅组件重渲染。

你说用memo没用，是因为memo只负责对比组件的props是否变化，而这些组件的重渲染是由Context订阅触发的，和props无关，所以memo起不到作用。

解决方法 #

1. 拆分Context（最推荐，适合状态独立的场景）

把不同的状态和对应的setter拆成多个独立的Context，这样修改某个状态时，只有订阅对应Context的组件会重渲染，其他组件不受影响。

示例代码：

// 拆分多个Context
const AContext = createContext();
const BContext = createContext();
const CContext = createContext();

// 修改Cont组件，嵌套多个Provider
function Cont({ children }) {
  const [A, setA] = useState(0);
  const [B, setB] = useState(10);
  const [C, setC] = useState(20);

  return (
    <AContext.Provider value={{ A, setA }}>
      <BContext.Provider value={{ B, setB }}>
        <CContext.Provider value={{ C, setC }}>
          {children}
        </CContext.Provider>
      </BContext.Provider>
    </AContext.Provider>
  );
}

// A组件只订阅CContext
function A() {
  const { setC } = useContext(CContext);
  console.log("A rendered");

  return (
    <div onClick={() => setC(prev => prev + 1)}>A</div>
  );
}

// B组件只订阅BContext
function B() {
  const { B } = useContext(BContext);
  console.log("B rendered");

  return <div>{B}</div>;
}

这样点击A修改C时，只有A和C组件会重渲染，B组件完全不受影响。

2. 拆分状态与Setter Context（进一步优化，避免只用到setter的组件重渲染）

如果有的组件只用到setter（比如你的A组件），可以把状态和setter分别放在两个Context里：

const StateContext = createContext();
const SetterContext = createContext();

function Cont({ children }) {
  const [A, setA] = useState(0);
  const [B, setB] = useState(10);
  const [C, setC] = useState(20);

  return (
    <StateContext.Provider value={{ A, B, C }}>
      <SetterContext.Provider value={{ setA, setB, setC }}>
        {children}
      </SetterContext.Provider>
    </StateContext.Provider>
  );
}

// A组件只订阅SetterContext（setter是稳定的，永远不会变）
function A() {
  const { setC } = useContext(SetterContext);
  console.log("A rendered");

  return (
    <div onClick={() => setC(prev => prev + 1)}>A</div>
  );
}

这个方案下，A组件只会在首次渲染时执行，之后哪怕C状态变化，因为SetterContext的value没有变化（setter函数是React稳定提供的），A组件不会重渲染；B组件只有当B状态变化时才会重渲染，完美解决所有不必要的重渲染。

3. 用useMemo缓存Provider的value（适合不想拆分Context的场景）

如果不想拆分Context，可以用useMemo缓存value对象，只有当依赖的状态变化时才重新生成对象：

function Cont({ children }) {
  const [A, setA] = useState(0);
  const [B, setB] = useState(10);
  const [C, setC] = useState(20);

  // 用useMemo缓存value，依赖是A、B、C（setter是稳定的，不用加）
  const contextValue = useMemo(() => ({
    A, setA, B, setB, C, setC
  }), [A, B, C]);

  return (
    <context.Provider value={contextValue}>
      {children}
    </context.Provider>
  );
}

不过这个方案只能解决“Cont每次重渲染都生成新对象”导致的不必要重渲染，只要A/B/C任意一个状态变化，所有订阅组件还是会重渲染，所以不如拆分Context彻底。

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