React Context定时器场景下如何避免不必要重渲染？

核心思路就是拆分多个独立Context，用同一个定时器计算所有值，但只在对应值真正变化时更新对应的Context，让依赖组件只在需要的时候重渲染。

具体实现步骤： #

1. 按需求拆分Context
   根据组件的依赖，把Context拆成两组：比如ABContext（给需要a、b的组件用）和CContext（给需要c的组件用）。如果a、b也是完全独立的，拆成三个单独的Context也行，看你的实际需求。

   代码示例：

   import React, { createContext, useState, useEffect, useContext } from 'react';
   
   // 拆分后的独立Context
   const ABContext = createContext({ a: 0, b: 0 });
   const CContext = createContext(0);
   

2. 在根Provider里统一管理定时器和状态更新
   不要把定时器放在自定义hook里到处传，而是在一个根Provider组件里维护唯一的定时器，每次触发时计算新值，对比旧值后只更新变化的状态，这样对应的Context才会更新。

   代码示例：

   function TimerRootProvider({ children }) {
     // 分别维护a/b和c的状态
     const [abState, setAbState] = useState({ a: 0, b: 0 });
     const [cState, setCState] = useState(0);
   
     useEffect(() => {
       const timer = setInterval(() => {
         // 这里写你的a、b、c计算逻辑
         const newA = Math.floor(Math.random() * 100); // 示例计算逻辑
         const newB = Math.floor(Math.random() * 200);
         const newC = Math.floor(Math.random() * 300);
   
         // 只有a或b变化时，才更新ABContext的状态
         if (newA !== abState.a || newB !== abState.b) {
           setAbState({ a: newA, b: newB });
         }
   
         // 只有c变化时，才更新CContext的状态
         if (newC !== cState) {
           setCState(newC);
         }
       }, 30);
   
       return () => clearInterval(timer);
     }, [abState, cState]);
   
     // 嵌套Provider，让子组件按需获取
     return (
       <ABContext.Provider value={abState}>
         <CContext.Provider value={cState}>
           {children}
         </CContext.Provider>
       </ABContext.Provider>
     );
   }
   

3. 组件按需使用Context
   各个组件只订阅自己需要的Context，这样只有当对应的值变化时，组件才会重渲染。

   代码示例：

   // 只需要a和b的组件
   function ABComponent() {
     const { a, b } = useContext(ABContext);
     return <div>A: {a}, B: {b}</div>;
   }
   
   // 只需要c的组件
   function CComponent() {
     const c = useContext(CContext);
     return <div>C: {c}</div>;
   }
   

为什么这个方案有效？ #

• 不管定时器30ms触发多少次，只有当值真正变化时才会调用状态setter，对应的Context才会更新，避免了无意义的重渲染。
• 不需要依赖useMemo或者React.memo来做额外缓存，因为状态本身只有变化时才会更新，Context的value是稳定的。
• 单个定时器统一计算所有值，不会出现多个定时器的性能问题。

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