使用useReducer复现类组件state行为是否可行，对性能有何影响？

方案合理性 #

这个方案是完全合理的，逻辑本身没有问题：

• 首先纠正一个常见认知：React 18 已经默认对所有场景的状态更新做了批量处理，不管是事件回调、定时器还是Promise回调中连续调用多个setState，都只会触发一次重渲染，你最初担心的「逐个更新状态无法批量执行」的问题在新版本React中已经原生解决。如果你的项目用的是React 17及更早版本，这个方案确实可以解决非合成事件、异步回调中状态更新无法批量的问题，减少不必要的重渲染。
• 你写的reducer兼容了对象传参和函数式更新两种用法，和类组件的setState使用习惯高度一致，多个关联状态集中管理的场景下，不用声明大量useState，代码可读性会更高。
• 注意你提供的reducer代码示例有个小语法笔误，正确的定义应该是const stateReducer = (prev, next) => {，实际使用时修正即可。

性能影响 #

整体来看这个方案在绝大多数场景下不会有性能问题，甚至比分散声明多个useState的内存占用更低，只有一种场景需要注意规避额外重渲染的问题：

• 如果你有使用React.memo包裹的子组件，且子组件只依赖state中的单个属性，不要把整个state对象作为props传递，要把用到的属性解构出来单独传递。因为每次更新state都会返回一个新的对象，直接传整个state的话，哪怕子组件依赖的属性没有变化，也会被判定为props变更触发重渲染。

适用场景建议 #

• 如果多个状态属于同一业务模块、关联性很强（比如表单的多个输入项、弹窗的所有控制状态），用这个方案非常合适，维护成本更低。
• 如果状态之间完全独立、更新逻辑互不关联，分开用useState也完全没问题，不需要强行合并所有状态到同一个对象里。

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