React 列表 Keys

React 列表 & Keys

在 React 开发中，处理列表数据是常见的需求。React 提供了强大的列表渲染功能，其中 React.createElement 和 JSX 都是常用的方法。然而，为了提高渲染效率和避免潜在的问题，正确使用 Keys 是至关重要的。

引言

在 React 中，当渲染列表时，每个列表项都需要有一个唯一的 key 属性。这个 key 属性是给 React 的，而不是给浏览器的，它的主要作用是帮助 React 识别哪些项被更改、添加或者删除。

Keys 的作用

1. 优化渲染性能：当列表中某个元素改变时，React 可以通过比较 key 的值来快速找到该元素，从而只重新渲染该元素，而不是整个列表。

2. 提升组件的稳定性：在组件的重新渲染过程中，React 可以通过 key 来追踪每个元素的变化，从而避免因为顺序变化导致的状态错误。

使用 Keys 的最佳实践

1. 使用唯一的字符串或数字作为 key：每个列表项都应该有一个唯一的 key。如果列表项没有稳定的 ID，可以使用 Math.random() 生成一个唯一的 key。

   const items = [{ id: 1, text: 'Learn React' },{ id: 2, text: