React Context冗余渲染与重复渲染问题优化咨询

背景 #

我使用Context API存储React应用的状态、函数、变量、对象及数组等数据，采用组件对象分类存储的方式管理数据，以下是reducer函数及action creator代码：

Reducer代码 #

const globalDataReducer = (state, action) => {
  switch (action.type) {
    case STORE_IN_GLOBAL_DATA:
      const { component, typeOfData, data: newData } = action.payload;
      if (!state[component]) {
        state[component] = {};
      }
      if (!state[component][typeOfData]) {
        state[component][typeOfData] = {};
      }
      return {
        ...state,
        [component]: {
          ...state[component],
          [typeOfData]: {
            ...state[component][typeOfData],
            ...newData
          },
        },
        triggered: component
      }
    default:
      return state;
  }
};

Action Creator代码 #

import { STORE_IN_GLOBAL_DATA, INVALID_TYPE_OF_DATA } from "./action.types";

const storeInGlobalData = (data, typeOfData, component) => {
  let actionType = INVALID_TYPE_OF_DATA;
  const dataAllowed = ["states", "nodes", "objects", "arrays", "refVars", "vars"];
  
  if (typeof data === "object" && typeof typeOfData === "string" && typeof component === "string") {
    for (let data of dataAllowed) {
      if (data === typeOfData) {
        actionType = STORE_IN_GLOBAL_DATA;
        break;
      }
    }
  }
  
  return {
    type: actionType,
    payload: {
      component,
      typeOfData,
      data
    }
  }
};

export { storeInGlobalData };

当前性能问题 #

• 使用useContext获取数据时，所有订阅该Context的组件都会重渲染，导致性能下降；曾尝试通过reducer中的triggered属性结合条件判断控制渲染，但不符合React规则失败。
• 发现useContext或useSelector会先于正常渲染触发组件渲染，导致组件渲染两次，希望控制为单次渲染。

解决方案 #

1. 控制冗余渲染，仅让触发的组件重渲染 #

方案一：拆分Context，细化订阅粒度

不要使用单一全局Context，而是按组件或数据类型拆分多个小Context。比如为每个需要独立状态的组件单独创建Context，或者把states、objects等不同类型的数据分别放到对应Context中。组件只订阅自己需要的Context，只有当订阅的Context更新时才会触发重渲染，从根源减少冗余渲染。

方案二：自定义memo Hook + React.memo 精准控制

编写自定义Hook，结合useMemo缓存组件所需的特定数据，再用React.memo包裹组件，只有当依赖的目标数据变化时才触发重渲染：

// 自定义Hook：精准获取指定组件的指定类型数据
const useComponentData = (componentKey, dataType) => {
  const globalContext = useContext(GlobalDataContext);
  return useMemo(() => {
    return globalContext[componentKey]?.[dataType] ?? {};
  }, [globalContext, componentKey, dataType]);
};

// 用React.memo包裹组件，阻止无意义重渲染
const MyComponent = React.memo(() => {
  const myStates = useComponentData('MyComponent', 'states');
  // 组件业务逻辑
  return <div>{/* 渲染内容 */}</div>;
});

核心逻辑：useMemo会对比依赖项，只有目标组件的对应类型数据真的变化时才返回新值；React.memo会跳过props未变化的组件渲染。

方案三：改用Redux Toolkit（适合复杂状态场景）

Redux Toolkit的useSelector默认会做浅比较，只有选中的状态片段变化时才触发组件重渲染。可以保留现有按组件分类的结构，用createSlice按组件拆分slice，或者编写精准选择器：

// 定义精准选择器
const getComponentData = (state, componentKey, dataType) => {
  return state.global[componentKey]?.[dataType] ?? {};
};

// 组件内使用
const myData = useSelector(state => getComponentData(state, 'MyComponent', 'objects'));

2. 避免useContext/useSelector导致的两次渲染 #

核心原因

开发模式下的两次渲染基本是React Strict Mode导致的，它会故意执行两次渲染、副作用操作，帮你检测潜在的代码问题，生产模式下该行为会自动消失。

解决方案

• 生产模式验证：打包生产版本测试，两次渲染的情况会自动消失。
• 暂时关闭Strict Mode（开发阶段）：移除index.js中的<React.StrictMode>标签，开发时就不会出现两次渲染，但上线前记得重新添加。
• 规范副作用写法：如果是useEffect中的逻辑被执行两次，确保添加正确的依赖项，并编写清理函数避免重复操作：

useEffect(() => {
  const loadData = async () => {
    // 异步请求逻辑
  };
  loadData();
  // 清理函数：取消未完成的请求或订阅
  return () => { /* 清理逻辑 */ };
}, [myData]); // 仅当依赖变化时执行副作用

• 禁止渲染阶段执行状态更新：确保所有setState操作都放在事件回调或useEffect中，不要直接在渲染函数内执行，否则会触发额外渲染。

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