7kms / react-illustration-series

图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.
http://7km.top/
GNU Affero General Public License v3.0
7.5k stars 804 forks source link

关于 key 有什么作用,可以省略吗? #55

Open fikyair opened 2 years ago

fikyair commented 2 years ago

【文中也没有提到到底该不该省略,省略与不省略的区别是什么。】 期待更新~

thomas-void0 commented 2 years ago

元素key属性的作用是用于判断元素是新创建的还是被移动的元素,从而减少不必要的元素渲染。

7kms commented 2 years ago

重新整理了一下哈, key的作用那篇写的比较草, 现在优化了一下.

  1. key的作用就是服务于diff算法, 是节点是否可以复用的首要判定条件.
  2. 如果省略了key, 内部会默认使用null, 在列表节点有排序需求的情况下, 会造成性能损耗.

在多节点的情况下

除非是静态列表渲染, 没有更新动作, 可以省略key.

一般在列表需要二次渲染更新的情况下:

单节点情况

和多节点原理一致, 如果省略了key且在内部使用了state, 二次更新时也有可能造成状态混乱

归根到底, 需要更新的组件省略key不可以, 静态的(永不更新的)组件就可以省略