为何直接修改React State后调用setState仍会触发组件更新？

这确实是个容易让人困惑的点！我来帮你拆解一下为什么会出现这种看似违背React文档描述的行为：

先澄清一个小细节 #

你代码里的results其实不是真正的ES6 Map——你用了results["group1"] = ...这种普通对象的属性赋值方式，而不是Map的set()方法。所以results本质上还是一个普通JS对象，不过这不是核心问题，只是先帮你厘清概念。

核心原因1：setState调用本身就会触发重渲染 #

React的setState方法，不管你传的是空对象还是同一个状态引用，默认都会触发组件的重渲染流程——除非你通过shouldComponentUpdate钩子或者使用PureComponent做了浅比较拦截。

文档里说的“传入空对象不会合并状态”是事实，但“合并状态”和“触发重渲染”是两个独立的逻辑：

• 合并状态：React会把你传入的对象和当前state做浅合并，但空对象意味着没有新的状态字段要合并。
• 触发重渲染：只要调用了setState，React就会标记组件为“需要更新”，进而进入重渲染流程，哪怕你没传任何新状态。

而你直接修改了this.state.results的内部属性，当组件重渲染时，render函数读取到的已经是修改后的状态值，所以界面会跟着更新。

核心原因2：浅比较的作用范围 #

你提到的React“浅比较”，主要是用于这些场景：

• 当父组件更新时，判断子组件是否需要跟着更新（比如React.memo或者PureComponent）。
• 在组件自身的更新流程中，判断新state和旧state是否有差异，来决定是否要更新DOM。

但浅比较不会阻止setState触发的初始重渲染——哪怕你传入的新state和旧state是同一个引用，React还是会执行重渲染，只是在后续的DOM更新阶段可能因为没有差异而跳过实际的DOM修改，但组件的render函数还是会执行。

为什么文档强烈禁止直接修改state？ #

虽然当前案例中界面能正常更新，但这种做法是非常危险的，会带来很多潜在问题：

• 状态不一致风险：React的状态更新是异步的，直接修改state可能会被后续的setState覆盖，或者在并发模式下出现不可预测的行为。
• 调试困难：违背不可变原则后，你无法通过React DevTools追踪状态的变化历史，因为没有创建新的状态副本，很难定位bug。
• 后续优化会出问题：如果之后把组件改成PureComponent，或者用React.memo包裹，浅比较会认为state的引用没变化，导致组件无法更新，出现界面不刷新的bug。

正确的做法：遵循不可变原则 #

要避免这些问题，你需要创建状态的副本，而不是直接修改原状态：

针对普通对象的写法 #

onUpdateClick(i) {
  // 逐层复制，保证不可变性
  const newResults = {...this.state.results};
  newResults.group1 = [...newResults.group1];
  newResults.group1[i] = {...newResults.group1[i], value: i};
  this.setState({ results: newResults });
}

onResetClick(i) {
  const newResults = {...this.state.results};
  newResults.group1 = [...newResults.group1];
  newResults.group1[i] = {...newResults.group1[i], value: "..."};
  this.setState({ results: newResults });
}

如果真的要使用ES6 Map #

constructor(props) {
  super(props);
  const results = new Map();
  results.set("group1", [{ value: "..." }, { value: "..." }]);
  this.state = { results };
}

onUpdateClick(i) {
  // 创建新的Map副本
  const newResults = new Map(this.state.results);
  // 复制group1数组
  const group1 = [...newResults.get("group1")];
  // 修改指定项
  group1[i] = {...group1[i], value: i};
  // 把新数组放回Map
  newResults.set("group1", group1);
  this.setState({ results: newResults });
}

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