面试题：React列表渲染中的key有什么作用

Question

在React中进行列表渲染时，通常会为每个列表项添加一个key属性。请详细说明这个key属性的作用是什么，并且举例说明如果不使用key或者使用不当的key会出现什么问题。

Answer 1

key属性的作用

1. 高效更新：React 使用 key 来识别哪些元素发生了变化、被添加或者被移除。当列表中的数据发生变化时，React 能够通过 key 快速定位到具体的项，从而只更新实际变化的部分，而不是重新渲染整个列表，提高了渲染性能。例如在一个待办事项列表中，添加新的待办事项时，React 可以通过 key 精准地插入新项，而不影响其他项。
2. 组件状态管理：有助于 React 正确地维护组件的状态。每个具有唯一 key 的列表项，其内部状态可以独立于其他项进行管理。比如一个包含多个输入框的列表，每个输入框都有自己的输入状态，通过 key 可以确保每个输入框的状态不混淆。

不使用 key 或使用不当 key 出现的问题

1. 性能问题：如果不使用 key，React 无法准确判断列表项的变化，可能会导致不必要的重新渲染。例如，一个列表中有 100 个项，当在列表开头插入一个新项时，如果没有 key，React 可能会重新渲染整个 100 项的列表，而不是只插入新项并保持其他项不变。
2. 状态混淆：使用不当的 key（如使用索引作为 key，且列表顺序频繁变化时），可能会导致组件状态混淆。假设列表项是复选框，当以索引为 key 且列表顺序改变时，复选框的选中状态可能会错乱，因为 React 会根据 key 来匹配和复用组件，索引改变后，原本属于某个项的状态可能被错误地应用到了其他项上。

示例代码如下：

import React from 'react';

// 错误示例：使用索引作为 key，列表顺序改变时会出问题
const itemsWithIndexKey = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' }
].map((item, index) => <li key={index}>{item.text}</li>);

// 正确示例：使用唯一标识符作为 key
const itemsWithCorrectKey = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' }
].map((item) => <li key={item.id}>{item.text}</li>);