文档说
例如，这不会重新渲染组件：
//错
this.state.comment = 'Hello';
相反，请使用 setState((：
//正确
this.setState({comment: 'Hello'});
但是，为什么没有答案？使用第二个是正确的理由是什么？
当你使用像 React 这样高级的框架时，他们不会费心解释为什么，因为它对于一篇简单的文章来说太复杂了。理解原因需要深入了解 React 以及 vanilla JavaScript 在引擎盖下的工作原理。查看源代码是您的一种选择，但是当您从表面上看他们的文档时，生活会更容易。
虚拟 DOM：
React 保留页面先前状态的副本。当它决定什么应该重新粉刷，什么不应该重新粉刷时，它使用它作为参考点。当你点击一个按钮时，整个页面不需要将整个 DOM 重新绘制为完全相同的值，但 JavaScript 的糟糕之处在于
JavaScript 中的对象不存在值相等
找到虚拟 DOM 和 React 想要重绘的下一个 DOM 之间的差异是不可能的，因为 JavaScript 没有辨别能力
。
console.log([] === [])我的例子没有解释手动改变状态的弱点。就是这个。
this.state = {}
this.state.arr = []
const prevArr = this.state.arr
this.state.arr.push(10)
console.log(this.state.arr === prevArr)具有新值的[10]数组注册为等于[]，因为相等是通过引用完成的，并且向现有元素添加值仍等于其先前状态。这是解决方法。你在 React 中也这样做并非巧合
this.state = {}
this.state.arr = []
const prevArr = [...this.state.arr]
prevArr.push(10)
this.state.arr
console.log(this.state.arr === prevArr)创建数组的新副本会保留指向值的所有指针，但它在硬件内存中是其自己的独立实体。现在他们不同了。当 React 遍历其虚拟 DOM 时，它现在可以注册您插入10数组，并希望将其反映在 DOM 的下一次迭代中。
this.setState 触发重新渲染
重新渲染不是对 DOM 的完全重新绘制。当发现差异时，它会触发您传入的特定元素的重新绘制。