使用useContext与createContext时遭遇重复渲染问题求助

重复渲染的核心原理 #

React组件会在三种情况下触发重新渲染：

• 自身的state发生变化
• 父组件传递的props发生变化
• 订阅的Context值发生变化（这里的“变化”指引用或值的实际改变）

用useContext的组件会自动订阅对应Context的更新——只要Provider传入的value发生引用变化（哪怕值的内容没变，比如每次创建新对象），组件就会触发重新渲染。

常见触发重复渲染的原因 #

1. Context的value引用不稳定
   最常见的坑是直接在Provider中创建新对象/数组，比如：

   function App() {
     const [count, setCount] = useState(0);
     // 每次App渲染时，都会生成新的{count, setCount}对象
     return (
       <MyContext.Provider value={{ count, setCount }}>
         <Child />
       </MyContext.Provider>
     );
   }
   

   哪怕只是父组件自身重新渲染（比如其他state变化），新的value对象会让所有订阅组件误以为Context值更新，从而重复渲染。

2. 父组件无意义重复渲染
   如果包裹Provider的父组件因为自身state/props变化频繁渲染，哪怕Context的实际值没改，也会带动Provider重新渲染，进而触发订阅组件渲染。

3. 未做组件渲染优化
   订阅Context的组件没有用React.memo包裹，导致即使自身props/state没变化，也会跟着父组件或Context的无关更新重新渲染。

解决方法 #

1. 稳定Context的value引用 #

用useMemo包裹Context的value，只在依赖项变化时重新创建对象：

function App() {
  const [count, setCount] = useState(0);
  const contextValue = useMemo(() => ({
    count,
    setCount
  }), [count]); // 只有count变化时才更新value

  return (
    <MyContext.Provider value={contextValue}>
      <Child />
    </MyContext.Provider>
  );
}

2. 用React.memo优化组件 #

对订阅Context的组件做浅比较优化，避免不必要的渲染：

const Child = React.memo(() => {
  const { count, setCount } = useContext(MyContext);
  console.log('Child组件渲染');
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
});

3. 拆分Context #

如果一个Context包含多个独立状态，拆分成多个Context，让组件只订阅自己需要的部分，减少无关更新带来的渲染：

// 拆分两个Context
const CountContext = createContext();
const SetCountContext = createContext();

function App() {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={count}>
      <SetCountContext.Provider value={setCount}>
        <Child />
      </SetCountContext.Provider>
    </CountContext.Provider>
  );
}

// Child只订阅需要的Context
const Child = () => {
  const count = useContext(CountContext);
  const setCount = useContext(SetCountContext);
  // ...
};

关于useEffect模拟componentDidMount #

要实现类似class组件中componentDidMount的效果（只在组件挂载时执行一次），直接在组件内部添加空依赖数组的useEffect即可：

const Child = () => {
  const { count } = useContext(MyContext);

  // 仅在组件挂载时执行一次，相当于didMount
  useEffect(() => {
    console.log('组件挂载完成');
    // 这里可以写初始化逻辑，比如请求数据、绑定事件
    return () => {
      // 这里是卸载时的清理逻辑，相当于willUnmount
    };
  }, []); // 空依赖数组是关键

  console.log('组件渲染');
  return <div>{count}</div>;
};

即使组件因为Context更新重复渲染，这个useEffect也只会执行一次，因为依赖数组为空，React认为没有需要监听的变化。

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