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

一、文字

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

巴特西

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

最新文章

热门文章