React渲染方法采用深度对比还是浅度对比？普通Component默认是深度对比吗？

嘿，这两个问题其实是很多React新手容易混淆的点，我来给你掰扯清楚：

1. React在render方法中执行的是深度对比还是浅度对比？ #

首先得明确一个关键：render方法本身并不执行任何对比逻辑。对比逻辑主要发生在两个阶段：组件是否触发render的判断阶段，以及render之后的虚拟DOM diff阶段。

• 组件触发render的前提：如果是普通Component，默认的shouldComponentUpdate()会直接返回true——也就是说，只要你更新了props或者state（哪怕只是把同一个值重新赋值），组件就会触发render，这个过程里完全没有对比操作。
• render之后的虚拟DOM diff：当组件生成新的虚拟DOM后，React会和旧的虚拟DOM做高效的深度diff，但这个diff不是粗暴地递归遍历所有属性，而是基于组件层级、key值等做的策略性对比，只更新真正变化的DOM节点，这也是React性能优化的核心之一。

所以你问的"render方法中的对比"其实是个误解，对比不在render里，而是在触发render的前置判断，以及render后的DOM更新阶段。

2. 普通Component默认会执行深度对比吗？ #

答案是完全不会，这是个很常见的误区！

• React.PureComponent的shouldComponentUpdate()确实会对props和state做浅度对比：它会检查props/state的引用是否变化，比如如果是对象或数组，只要引用没变（哪怕内部属性被修改了），就会返回false，不触发render。
• 而普通Component的默认shouldComponentUpdate()根本不做任何对比，直接返回true——意思就是，不管你的props/state是深度变化还是只是引用变了，甚至只是同一个值重新赋值，都会触发render。

举个直观的例子：

• 普通组件中，执行this.setState({ todos: [...this.state.todos] })，哪怕数组内容完全没变，因为引用变了，组件还是会触发render；
• 但在PureComponent中，如果你直接修改数组内部this.state.todos.push('new item')，然后用this.setState({ todos: this.state.todos })，因为引用没变化，浅对比会认为没有更新，就不会触发render（当然这种直接修改state的方式本身是不推荐的）。

总结一下核心区别： #

• 普通Component：无对比，只要props/state被更新就触发render；
• PureComponent：浅对比props/state的引用，只有引用变化才触发render；
• 虚拟DOM的深度diff：是React内部的DOM更新逻辑，和组件是否触发render的判断是独立的两个环节。

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