对react中key的理解&&利用key让组件重新渲染

当我们渲染列表时通常会用到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，而是直接采用