如何避免React在渲染期间因State变更触发重复重渲染？

首先明确：你遇到的问题根源是每次调用updateMyDict都会触发一次state更新，进而触发重渲染。下面给你几个直接有效的解决思路：

1. 合并更新操作（最简单直接） #

如果你的多次更新是在同一个代码块里执行的，直接把要更新的键值对合并成一个对象，只调用一次updateMyDict：

// 不要分开调用
// updateMyDict({a: 2})
// updateMyDict({b: 4, c: 3})

// 合并成一次调用
updateMyDict({a: 2, b: 4, c: 3})

这样只会触发一次state更新和重渲染，完全符合你的需求。如果是动态收集的更新项，可以先存在一个临时对象里，最后一次性提交：

const updates = {};
updates.a = 2;
updates.b = 4;
updates.c = 3;
updateMyDict(updates);

2. 改造Reducer支持批量更新 #

如果你的场景无法提前合并（比如更新逻辑分散在不同地方，但需要最终一次性生效），可以修改你的reducer，让它支持接收多个更新对象的数组，一次性合并所有变更：

// 修改后的reducer
const concatDict = (dictA, action) => {
  // 如果action是数组，就逐个合并所有对象
  if (Array.isArray(action)) {
    return action.reduce((prev, curr) => ({...prev, ...curr}), dictA);
  }
  // 原来的单对象合并逻辑
  return {...dictA, ...action};
};

// 使用时可以传入数组批量提交
updateMyDict([{a: 2}, {b: 4, c: 3}]);

这种方式可以灵活地把多个分散的更新请求打包，只触发一次state更新。

3. 利用React的自动批量更新（针对React 18+） #

在React 18及以后的版本中，所有事件处理函数、Promise回调、setTimeout等异步操作中的state更新都会被自动批量处理。也就是说，如果你的两次updateMyDict调用是在同一个React合成事件（比如按钮点击、输入 onChange）里执行的，React会自动合并这两次更新，只触发一次重渲染，不需要额外做处理。

如果是在React 18之前的版本，异步回调里的更新不会自动批量，这时候可以用ReactDOM.unstable_batchedUpdates来手动包裹：

import { unstable_batchedUpdates } from 'react-dom';

unstable_batchedUpdates(() => {
  updateMyDict({a: 2});
  updateMyDict({b: 4, c: 3});
});

注意unstable_batchedUpdates标记为不稳定API，但在实际项目中一直被广泛使用，React 18之后可以不用它了。

另外纠正你一个误解：useMemo是用来缓存昂贵的计算结果，避免每次重渲染都重复计算的，它不能阻止state变更导致的重渲染，所以这个方案对你的问题不适用。

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