react-illustration-series
react-illustration-series copied to clipboard
关于 key 有什么作用,可以省略吗?
【文中也没有提到到底该不该省略,省略与不省略的区别是什么。】 期待更新~
元素key属性的作用是用于判断元素是新创建的还是被移动的元素,从而减少不必要的元素渲染。
重新整理了一下哈, key的作用那篇写的比较草, 现在优化了一下.
-
key
的作用就是服务于diff算法
, 是节点是否可以复用的首要判定条件. - 如果省略了
key
, 内部会默认使用null
, 在列表节点有排序需求的情况下, 会造成性能损耗.
在多节点的情况下
除非是静态列表渲染, 没有更新动作, 可以省略key.
一般在列表需要二次渲染更新的情况下:
- 加上
key
只有好处, 没有坏处. - 省略
key
轻则性能损耗, 严重就会造成状态混乱的bug
单节点情况
和多节点原理一致, 如果省略了key且在内部使用了state, 二次更新时也有可能造成状态混乱
归根到底, 需要更新的组件省略key不可以, 静态的(永不更新的)组件就可以省略