层层解剖React渲染列表key值问题（内含源码解析）

2023-10-17 14:06:57

React 列表渲染中 key 值的终极指南

React 中的列表渲染是一种常见的操作，涉及动态创建和更新列表元素。为了高效地管理这些列表，React 引入了 key 值，这是一种用于唯一标识列表项的特殊属性。本文将深入探讨 key 值在 React 列表渲染中的作用、最佳实践、常见错误以及性能优化技巧。

1. Key 值的作用

key 值的作用是帮助 React 追踪列表中每个项目的更改并确定需要更新的项目。如果没有指定 key 值，React 将默认使用项目索引作为 key。但是，使用索引作为 key 值存在一些问题：

索引可能会发生变化： 当列表项目被删除或重新排序时，索引也会发生变化，这会导致 React 重新渲染整个列表。
组件状态变化： 当列表项目包含子组件时，子组件的状态变化可能会触发父组件重新渲染，进而重新渲染整个列表。

因此，使用唯一的字符串作为 key 值比使用索引更加可靠。

2. Key 值最佳实践

使用 key 值时，应遵循以下最佳实践：

使用稳定的值： 选择不易更改的值作为 key，例如 ID 或其他唯一标识符。
子组件 key 值： 对于列表中的子组件，使用子组件的 ID 或其他唯一标识符作为 key 值。
更新 key 值： 在列表项目被删除或重新排序时，请务必更新 key 值。

3. Key 值常见错误及解决方法

在使用 key 值时，可能会遇到一些常见错误：

错误 1：使用索引作为 key 值

const listItems = [
  <li>Item 1</li>,
  <li>Item 2</li>,
  <li>Item 3</li>
];

const MyComponent = () => (
  <ul>
    {listItems}
  </ul>
);

解决方案： 使用唯一的字符串作为 key 值：

const listItems = [
  <li key="item-1">Item 1</li>,
  <li key="item-2">Item 2</li>,
  <li key="item-3">Item 3</li>
];

const MyComponent = () => (
  <ul>
    {listItems}
  </ul>
);

错误 2：子组件未指定 key 值

const MyComponent = () => (
  <ul>
    {listItems.map(item => (
      <li>{item}</li>
    ))}
  </ul>
);

解决方案： 在子组件中指定 key 值：

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

错误 3：删除或重新排序时未更新 key 值

const listItems = [
  <li key="item-1">Item 1</li>,
  <li key="item-2">Item 2</li>,
  <li key="item-3">Item 3</li>
];

const MyComponent = () => (
  <ul>
    {listItems.filter(item => item !== 'Item 2')}
  </ul>
);

解决方案： 在删除或重新排序列表项目时更新 key 值：

const listItems = [
  <li key="item-1">Item 1</li>,
  <li key="item-3">Item 3</li>
];

const MyComponent = () => (
  <ul>
    {listItems.filter(item => item !== 'Item 2')}
  </ul>
);