React中setState()是浅合并还是完全替换状态？

我一直以为setState()会完全替换旧状态，要实现浅合并得手动用扩展运算符。但看到一些旧文章说React会自动做浅合并，自己测试后发现是完全替换的。

测试代码 #

import React from 'react';

export default function App() {
  const [state_M, setState_M] = React.useState({
    count: 0,
    name: 'alpha',
    id: 123
  });

  return (
      <button
        onClick={() =>
          setState_M({
            name: 'beta',
            address: 'US',
          })
        }
      >
        state_M {JSON.stringify(state_M)}
      </button>
  );
}

测试结果 #

点击按钮后，状态变为：

{
  "name": "beta",
  "address": "US"
}

疑问 #

浅合并是已废弃的行为吗？相关文档在哪里有明确说明？

核心差异说明 #

这里的关键是类组件的setState和函数组件useState的更新函数行为完全不同：

• 类组件的setState：当传入对象作为参数时，React会自动对当前this.state执行浅合并。官方文档明确表述：> If you pass an object as nextState, it will be shallowly merged into this.state.
• 函数组件的useState更新函数：不会自动合并状态，传入新对象会直接替换旧状态。如果需要合并，必须手动使用扩展运算符（比如setState_M(prev => ({...prev, name: 'beta', address: 'US'}))），或者借助Immer这类工具实现。

旧文章提到的浅合并行为，特指类组件中的setState逻辑，并非函数组件的useState更新规则——二者不存在谁废弃谁的问题，只是React不同状态API的设计差异。

内容的提问来源于stack exchange，提问作者Nor.Z