React 入门：深入理解 keys 的作用

2023-09-30 14:35:51

React 中的 Key：提高性能和优化 UI 的关键

在 React 中，列表是一种常见的组件，用于渲染动态数据。为了高效地更新 UI，React 采用了虚拟 DOM 机制。虚拟 DOM 是 React 内部的一个数据结构，与真实 DOM 相对应。当组件的状态或属性发生变化时，React 会比较虚拟 DOM 与真实 DOM 的差异，只更新那些发生变化的节点。这个差异比较的过程称为调和。

Keys 在 React 中的作用

Keys 在 React 中发挥着至关重要的作用，可以帮助 React 更高效地进行调和。当 React 在列表中检测到 key 时，它会使用 key 来追踪每个元素的身份。当列表中的数据发生变化时，React 会比较 key 来确定哪些元素被修改、被添加或者被移除。有了 key，React 可以更精准地更新 DOM，避免不必要的重新渲染。

Key 的使用方式

在实践中，我们可以通过以下几种方式使用 key：

字符串 key： 对于简单的数据结构，我们可以使用字符串作为 key。例如：

const items = ['Apple', 'Banana', 'Cherry'];

const listItems = items.map((item, index) => <li key={index}>{item}</li>);

数字 key： 对于有序的数据结构，我们可以使用数字作为 key。例如：

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

const listItems = items.map(item => <li key={item.id}>{item.name}</li>);

自定义 key： 对于复杂的数据结构，我们可以使用自定义函数来生成 key。例如：

const items = [
  { id: 1, name: 'Apple', color: 'Red' },
  { id: 2, name: 'Banana', color: 'Yellow' },
  { id: 3, name: 'Cherry', color: 'Red' },
];

const listItems = items.map(item => <li key={item.id + '-' + item.color}>{item.name}</li>);