前端优化之key的作用

 

写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么

     key是给每一个vndoe(虚拟DOm)的唯一id，可以依靠key，更准确，更快的拿到oldVnode中对应的vnode节点，利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。

例子：某虚拟DOM树的某一层原有两个节点a和b，页面更新后得到的新DOM树的该层还是只有a和b，只是a和b的位置与原来不同了。如果未提供唯一的标识key，React将认为a和b对应的位置前后的组件类型不同，而选择完全销毁后重新创建；而如果提供了唯一的标识key，React将能够判断出a和b只是位置不同，更新位置即可