React-key 属性

key 的作用

1、元素的唯一标识：帮助 react 识别每个元素的唯一性，react 通过 key 属性来判断新旧元素对比时，哪些元素需要更新、哪些元素需要重新渲染，从而提高渲染性能

2、提高重排性能：在列表或循环生成组件的场景中，如果没有为每个元素指定 key 属性，react 在进行 diff 算法比较时，会采用遍历对比的方式，导致性能下降。而指定了 key 属性后，会通过 key 值快速定位到新旧元素之间的差异，从而减少不必要的重排操作

3、组件状态保持：当组件在重新渲染时，React 会优先复用具有相同 key 值的组件实例，而不是销毁并重新创建一个新的组件实例。这使得在动态列表或条件渲染中保持组件状态成为可能。

Key 属性最佳实践

1、使用唯一且稳定的值

2、避免使用索引作为 key：在列表发生变化时，React 可能会错误地复用组件实例，导致出现渲染错误或不必要的性能损失。

3、不要频繁改变 key 的值：频繁改变 key 值可能会导致 react 无法正确地复用组件实例，从而降低性能。

参考

https://juejin.cn/post/7323382193623597094?searchId=2024091322270867C3C45573051AC21D59