正文
DOM Diff(差分)算法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1. 算法由来
React调用render()方法后，会生成一个React元素组成的树。
再次调用，生成一个新的树。React比较两者的差异，然后更新UI。
如果单纯使用算法，来查找两个DOM树的差异值，算法复杂度为O(n^3)。
为了提高渲染效率，假定：
1）元素类型不同，是不同的树
2）子元素可以通过key值来判断是否稳定
这样算法复杂度降低到O(n)
2. 算法比较步骤
1. 比较根节点
如果类型不同，卸载整个DOM节点，重新加载；
如果类型相同
1）如果是普通的html标签类型，比较属性，更新变化的属性。
2）如果是组件类型，更新props，引发componentWillReceiveProps和componentDidUpdate方法调用
2. 比较子节点（无key）
如果类型不同，卸载字节点，重新加载；
如果类型相同，依次比较字节点内容
1）这种情况下，追加元素开销最小，因为前面都相同；
2）头部插入元素开销最大；因为比较来看，第一个开始至最后一个都不相同。
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul><ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>
3. 比较子节点（有key非index）
对于上面的情况，如果同一列表的所有子元素有一个唯一值key值。
React先比较key值，如果相同的key值存在，但是位置不同，只移动位置。
元素移动位置只能在兄弟之间移动。
<ul>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul><ul>
<li key="2014">Connecticut</li>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
4. 比较子节点（有key是index）
˙这种情况，如果字节点顺序改变，可能会引起错误。
比如子列表中含有非受控组件input。此时如果触发排序，会导致input的state出现互相篡改。
示例
