面试题：React中如何进行列表渲染及常见的key使用误区

Question

在React中，假设你有一个数组，数组元素为对象，每个对象包含'id'和'name'属性。请写出使用map方法进行列表渲染的代码示例，并阐述为什么使用唯一的key值很重要，以及常见的key使用误区有哪些。

Answer 1

代码示例

假设数组为 data：

import React from 'react';

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

const ListComponent = () => {
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default ListComponent;

唯一 key 值的重要性

1. 帮助 React 高效更新 DOM：React 使用虚拟 DOM 来优化性能。当列表中的数据发生变化时，React 需要知道哪些元素真正改变了，以便最小化 DOM 操作。唯一的 key 可以让 React 快速识别哪些列表项是新的、哪些被修改、哪些被删除，从而高效地更新真实 DOM。
2. 保持组件状态的正确：在列表渲染中，每个组件可能有自己的状态（如输入框的输入值等）。如果没有唯一的 key，React 可能会错误地复用组件状态，导致状态混乱。例如，在一个包含输入框的列表中，如果没有正确的 key，输入框的输入值可能会在列表项重新排序或更新时出现错乱。

常见 key 使用误区

1. 使用索引作为 key：虽然使用数组索引作为 key 看起来很方便，但在列表有插入、删除操作时，会导致 key 变化。这使得 React 可能错误地复用组件，导致性能问题和状态混乱。例如，在列表头部插入新项时，所有后续项的索引都会改变，React 会认为所有项都改变了，从而重新渲染不必要的组件。
2. 使用随机数作为 key：随机数作为 key 在每次渲染时都会变化，这会导致 React 认为所有列表项都是全新的，每次都重新创建和销毁组件，极大地影响性能。因为 React 依赖稳定的 key 来识别组件是否是同一实例。