DOM的diffing算法

Posted 2022-02-08 So istes immer

目录

参考官网

我们知道，当调用 React 的 render() 方法时，会创建一棵由 React 元素组成的树 
为了更高效的更新DOM树，我们引入了 diffing算法

1.算法细节如下 

①当对比两棵树时，React 首先比较两棵树的根节点。
②若根节点为不同类型的元素（如从 <a> 变成 <img>），React 会拆卸原有的树并且建立起新的树 
③当对比两个相同类型的React 元素时，React 会保留 DOM 节点，仅更新有改变的属性
④当一个组件更新时，组件实例会保持不变，因此可以在不同的渲染时保持 state一致。React 更新该组件实例的 props 以保证与最新的元素保持一致。
⑤递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表
在子元素列表末尾新增元素时，更新开销比较小
如果将新增元素插入到表头，更新开销会比较大

为了解决上述问题，React 引入了 key 属性 

2.key属性 

key是虚拟DOM的标识
当状态中的数据发生变化的时候，React会根据新数据生成新的虚拟DOM，随后React会进行新旧虚拟DOM的Diffing比较

 

<li key=0>张三</li>
<li key=1>李四</li>

<li key=0>王五</li>
<li key=1>张三</li>
<li key=2>李四</li>