React key 是干嘛用的 为什么要加？key 主要是解决哪一类问题的

[lgwebdream]

[lgwebdream]

扫描下方二维码，获取答案以及详细解析，同时可解锁800+道前端面试题。

[LoveWei0]

主要是对DOM渲染性能的优化,当列表顺序发生改变时,如果不加key. 不管数据是否发生改变, 所有列表元素都会重新渲染,当列表元素没有发生改变时,值是在末尾产生新的元素,此时key的值加不加都是可以的,React只会渲染最后一个元素.

• 当元素类型变化时,会销毁重建
• 当元素类型不变时,对比属性
• 当组件元素类型不变时,通过props递归判断子节点
• 递归对比子节点,当子节点是列表时,通过key和props来判断.若key一致,则进行更新,若key不一致,就销毁重建

[talang1991]

key 主要是解决哪⼀类问题的？ React 中的key 属性主要用于在列表或者数组中标识唯一的元素。 在React 进行diff 算法比较两个列表或数组时，key 可以帮助React 识别哪些元素是新创建的，哪些元素被移动了，哪些元素被删除了。 在没有key 的情况下，React 会默认按照元素的顺序进行比较和更新。