文章目录
当我们渲染列表时通常会用到key
const listItems = numbers.map((item) =>
<li key={item.id}>{item.val}</li>
)
key的作用
(一般同级同结构的子节点都需要采用key属性,方便diff算法的使用)
- 纯静态的同级同结构节点的渲染,可以采用index作为key的值,因为这里不需要动态去变化节点里面的内容的值;
- 对于一组动态变化的数组来说,采用index作为key的值,会有可能出现问题,因为index的值和数组内的元素内容不具有关联性,所以即使采用了index作为key,子组件的内容有可能不会随着属性的变化而发生变化(只要组件内该元素不与属性构成联系),所以一般采用数组中元素的某一个唯一值作为key,这样一来,只要统一位置的节点的key值不一致,就会直接销毁和新建而不是直接更新;
- 对于一个不想受到父组件属性状态影响而导致没必要的渲染的组件,可以采用key值,因为只要key值不发生改变,组件的属性不变,即使父组件渲染,该组件也不会发生变化,只有组件的状态或者属性发生变化,组件才会二次渲染;一旦key值变化,就直接组件销毁然后再新建该组件。
原理
因为在reactelement中有一个属性是key,该属性默认是为空值,所以一般情况下,只要组件不加上key值,react是不会去校验组件的key,而是直接采用