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

阳光穿透心脏的1/2处 2023-01-18 02:29 235阅读 0赞

### 文章目录 ###

*  key的作用
 *  原理
 *  对比流程
 *  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，而是直接采用diff算法进行对比，一旦组件加上了key值，react就会在渲染时对该组件的身份进行校验，首先校验新旧组件的key值是不是一致，**不一致的话，该组件直接销毁**，然后在新建该组件；**如果一致，则比较组件的属性是否发生变化**，如果发生变化，则采用diff算法进行对比，然后得出差异对象，如果属性没发生变化，则认为该组件不需要改变；

# 对比流程 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]

# react组件中的key #

简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。

## 利用key让组件重新渲染 ##

如果你去改变某个组件的key值的话，它会在下次渲染的时候被销毁并当作新的组件重新渲染进来

参考:  
[https://segmentfault.com/a/1190000017511836][https_segmentfault.com_a_1190000017511836]

[本文链接https://blog.csdn.net/qq\_39903567/article/details/116301278][https_blog.csdn.net_qq_39903567_article_details_116301278]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: /images/20221021/fcc1e86221454a96b5ad6e94dadda10d.png
[https_segmentfault.com_a_1190000017511836]: https://segmentfault.com/a/1190000017511836
[https_blog.csdn.net_qq_39903567_article_details_116301278]: https://blog.csdn.net/qq_39903567/article/details/116301278