DOM Diff(差分)算法
2024-08-27 06:05:53
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出现互相篡改。
最新文章
- 妈妈再也不担心我的编码问题了。中文编码融汇贯通,windows,django,python,java,html 【转】
- Windows系统:桌面,开始菜单和工具栏都不见了
- C# 设置开机自动启动(注册表方式)
- 掌握iOS自动布局
- 杭电ACM2097--Sky数
- Delphi 对象的创建(create)与释放(free/destory)
- poj3252 Round Numbers
- paip.将数据导入到在英语语音数据库mysql道路解决空原则问题
- PIL遇到问题解决
- javaweb下载文件模板
- POI 的API大全二
- java排序算法(一):概述
- Linux系统之TroubleShooting(故障排除)(转)
- jquery easyui panel title文字格式设置
- python第七天,dict
- yum安装的时候报错,关于python的函数库
- 记一次免费让网站启用HTTPS的过程
- Pandas.Series.dt.dayofweek相关命令
- mybatis--parametertype的参数传递
- idea快捷键及快捷方法(待完善)