React: diff算法

同级比较

React 的diff 算法 对虚拟DOM树（和fiber树）进行分层比较，只比较相同层级节点，忽略跨层级DOM移动操作情形，从而实现一次遍历比较新旧两颗完整虚拟DOM树（和fiber树）。因此 React 官方建议不要进行 DOM 节点跨层级的操作。

元素比较

React使用下面方式来比较是否组件发生变化，需要应用到真实DOM节点：

• 如果上一次提交更新的老fiber和此次传入的新虚拟DOM元素有相同的type， 则保持当前的真实 DOM 节点，仅使用新的 props 进行更新
• 如果type不同且有一个新虚拟DOM元素，则需要创建一个新的真实DOM节点
• 如果type不同且有一个老fiber，则需要移除原真实DOM节点

React中创建虚拟DOM元素时，除文本节点为专门指定的固定type值外，其他虚拟DOM元素的type值都对应创建真实DOM节点的标签，如"p"、"div"等

组件更新

当一个组件更新时，React 将维护其原有的组件实例，避免 state 用于重新渲染被重置。
React会调用该组件实例的 componentDidUpdate() 等生命周期函数，并把最新的props更新到该组件实例中。
接下来，React会（根据shouldComponentUpdate方法返回结果）调用 render() 方法，diff 算法将在之前的结果以及新的结果中进行递归。

同级同组