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 算法将在之前的结果以及新的结果中进行递归。

同级同组子节点

React 使用key属性来实现更好的调和：

1. 对新集合的节点进行循环遍历，通过唯一 key 判断新老集合中是否存在相同的节点
2. 如果存在相同节点，则进行移动操作
3. 先将当前访问节点在老集合中的位置与 lastIndex 进行比较，如果lastIndex 大，则进行节点移动操作，否则不执行操作

lastIndex 表示遍历过的所有节点中在老集合中位置最末的节点的位置，如果当前访问的节点在老集合中的位置比 lastIndex 大，说明当前访问节点在老集合中就比上一个节点位置靠后，则该节点不会影响其他节点的位置，因此不用添加到差异队列中，即不执行移动操作，只有当访问的节点比 lastIndex 小时，才需要进行移动操作。

在开发过程中，应尽量减少类似将最后一个节点移动到列表首部的操作