React中在循环组件时加key的作用

103 阅读1分钟

视频讲解

虚拟DOM

对真实DOM的一个抽象,以JavaScript对象生成Node节点树,用对象的属性来描述节点,实现虚拟DOM与真实DOM的映射。

Diff算法

虚拟DOM树的比较,记录差异,最终产生的效果是视图解构全新渲染,但部分更新DOM。

不写key

仅做循环展示时,遍历组件不带key,页面仍会正常渲染。且没有key时,采用就地复用的渲染机制,可能会反而提高性能。但是操作节点后可能会产生数据错位。

写key

写key的作用是给node绑定唯一id,diff算法根据key进行新老节点树的比较,渲染的结果会更准确。key的设定尽量使用与当前数据强相关的唯一值。