当前位置:网站首页>虚拟DOM中给同一层级的元素设置固定且唯一的key为什么能提高性能

虚拟DOM中给同一层级的元素设置固定且唯一的key为什么能提高性能

2020-11-07 21:04:17 kuai23333

一、文字

key让React知道,当前新生成的React元素中的元素,是否能在之前生成的React元素中找到对应的。如果有,那么直接拿过来用就行了。假设列表头部插入一项,通过比对,React知道除了头部以外其他地方的项没有变化。React对DOM操作的时候,只需要在头部插入一个节点就可以了。剩余的节点不用动它们。

如果开发者没有设置key,那么React会设置它的key为项在列表中的的索引值。假设头部插入一项,两个React树一对比,React看你第一个元素和之前第一个元素的key一样,只是props改变了(这里我们假设列表每个项的内容不一样)。那只需要对第一个DOM节点做更新。比对第二个元素,React看你和之前第二个元素也一样啊,只是props改变了,那只需要对第二个DOM节点做更新。比对第三个元素,React看你和之前第三个元素也一样啊,只是props改变了,那只需要对第三个DOM节点做更新。。。最后还剩下一个多出来的元素,React一看你的key我之前没见过,那就新创建一个DOM节点插入到上述DOM节点们的末尾。

总结来说:如果原先列表有n项。开发者设置key值的开销就是创建一个DOM节点的开销。

开发者不设置key值的开销就是创建一个DOM节点的开销和更新n个节点的开销。

二、代码

为了更贴切的理解key的作用,可以点击链接查看代码及页面效果。

 https://codesandbox.io/s/nervous-bash-3ico9?file=/src/App.js

 

参考资料:

[1] 理解虚拟DOM及key属性的作用.https://time.geekbang.org/course/detail/100009301-9441

[2] 协调.https://zh-hans.reactjs.org/docs/reconciliation.html

版权声明
本文为[kuai23333]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/toLivetoLearn/p/13942250.html