react 16版本之前 diff策略

1.React通过制定自己的diff策略,将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题;

React是如何将O(n3) 复杂度的问题转换成 O(n) :

(1).只进行同级比较。

(2).不同类的React组件会被当做完全不同的DOM结构而被完全替换。

(3).key :开发人员可以通过给Virtual DOM一个唯一的key属性暗示React这是同一个DOM结构,反之若key值不同则会被当做完全不同的DOM结构。

2.React通过分层求异的策略,对Tree Diff进行算法优化;

3.React通过相同类生成相似树形结构,不同类生成不同树形结构的策略,对Component Diff进行算法优化。

4.React通过设置唯一key的策略,对Element Diff进行算法优化;

注意:

5.开发组件要保持稳定的DOM结构会有助于性能的提升;

6.尽量减少类似将最后一个节点移动到列表首部的操作,当节点数量过大或更新操作过于频繁时,在一定程度上会影响React的渲染性能。

7.React的Diff算法是在render里面进行计算的。

确认 取消