React调用setState时新值相同是否触发更新？是否自动检查状态变化？

好问题！咱先把核心问题掰明白，再一步步拆解你的例子：

1. React会自动检查状态变化吗？ #

答案是会的，在React 16.8及以后的版本中，不管是类组件的this.setState还是函数组件的useState更新函数，React都会对新旧状态做浅比较：

• 如果浅比较发现新旧状态完全一致（比如你例子里的width都是0），React会直接跳过后续的调和阶段（reconciliation phase），也不会触发组件的重新渲染。
• 只有当浅比较检测到状态有变化时，才会进入调和流程，判断是否需要更新DOM。

拿你给出的代码举例：

// constructor中
this.state = {width: 0}

// componentDidMount方法中
this.setState(() => ({ width: 0 }))

这种情况里，新旧state的width值完全相同，React的浅比较会识别到这一点，所以不会进入调和阶段，组件也不会重新渲染。

2. 有没有必要手动做状态检查？ #

虽然React已经帮我们做了浅比较，但手动提前判断还是有它的价值：

• 减少不必要的内部逻辑触发：哪怕React会跳过渲染，调用setState本身还是会触发一些内部的状态更新流程，提前判断能省去这部分微小的开销。
• 处理复杂类型状态：浅比较只对比引用或者基本类型的值，如果你的状态是对象、数组这类复杂类型，就可能出现问题。比如你state里是{user: {name: '小明'}}，如果你更新时传入一个新的对象但内容完全一样（{user: {name: '小明'}}），浅比较会认为引用变了，会触发调和；但如果手动先对比user.name是否一致，就能避免这种不必要的渲染。

所以像你提到的这种写法：

const width = getViewportWidth()
if (this.state.width !== width) {
  this.setState(() => ({ width }))
}

是完全合理的，尤其是在频繁获取状态（比如监听窗口 resize）的场景下，能有效减少无用的setState调用。

总结一下 #

• 对于数字、字符串这类基本类型的状态，React的自动浅比较足够可靠，哪怕传相同值调用setState也不会触发调和，但手动判断能进一步优化性能。
• 对于对象、数组这类复杂类型的状态，建议手动判断内容是否真正变化后再调用setState，避免因为引用变化但内容不变导致的不必要渲染。

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