diff算法中的概念

合并多次setState

setState被设计为一个异步的方法,目的是为了提升React底层的性能。假设我们短时间内连续变更3次state,React就会把这3次setState合并为一次setState,只做一次VDOM的比对,提高了整体的性能。

同级比较

diff算法会从根节点开始,一层层的向下比较,如果在某一层的某个节点发现不同了,他就会直接替换这个节点下面的所有子树。

key值的重要性

如果每一个虚拟DOM节点没有一个key值,他就没有自己的一个名字。当我们在做新旧虚拟dom的比对时,旧状态的虚拟节点就与难以与新状态的虚拟节点之间确立关系。当每一个虚拟节点都有唯一key值时,新旧状态的虚拟节点很快就能知道谁是谁,这样就极大的提升了diff算法的效率。

为什么不要将数组的下标作为key值

假如数组中又3个节点a,b,c。我们使用数组下标来作为dom的key值。

[a, b, c] // 0:a, 1:b, 2:c

这时删除b

[a, c] // 0:a, 1:c

原来key值为1对应节点为b, 但现在key=1对应的节点变成了c。这时这个key值就失去了它存在的意义了。 所以,为key值绑定一个稳定的值才是正确的做法

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值