7kms/react-illustration-series

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

fikyair opened this issue · 2 comments

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

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

7kms commented

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

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

在多节点的情况下

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

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

  • 加上key只有好处, 没有坏处.
  • 省略key轻则性能损耗, 严重就会造成状态混乱的bug

单节点情况

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

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