在 React 中，处理列表数据并渲染成 UI 是非常常见的操作。React 提供了强大的工具和机制来高效地处理大量数据，并确保 UI 渲染时保持性能和一致性。keys 是 React 用来识别和更新列表中每个元素的关键部分，正确使用 keys 是性能优化和避免渲染问题的关键。

目录

  1. React 列表渲染
  2. React Key 的作用
  3. React Key 的最佳实践
  4. 动态添加和删除列表项
  5. 参考资料

1. React 列表渲染

在 React 中，列表是通过 JavaScript 数组来表示的，通常使用 map() 方法来遍历数组并生成对应的组件。

1.1 使用 map() 渲染列表

function List() {
  const items = ['Apple', 'Banana', 'Orange'];

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

function App() {
  return <List />;
}

在上面的例子中，items 数组中的每个元素都会被 map() 遍历，map() 方法返回一个新的数组，其中每个元素对应一个 <li> 标签，最终渲染成一个无序列表。

2. React Key 的作用

key 是 React 列表中每个元素的唯一标识符，React 使用它来识别哪些项改变了、添加了或删除了。使用 key 的目的是提升性能，帮助 React 高效地更新和重新渲染 UI，避免不必要的 DOM 操作。

2.1 key 的作用

  • 帮助 React 识别元素：每次渲染时，React 会根据 key 来识别每个元素，以便正确地更新 DOM，而不会重新渲染整个列表。
  • 性能优化：当列表中的元素变化时，React 会利用 key 来准确地比较每个元素，从而最小化 DOM 更新。

2.2 正确使用 key

在渲染列表时，key 应该是每个列表项的唯一标识符，通常是来自数据中的 id 属性，而不是数组的索引。

function List() {
  const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' }
  ];

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

在这个例子中，我们使用了 item.id 作为 key，确保每个列表项的标识符唯一且稳定。使用 id 比使用数组索引作为 key 更为可靠。

3. React Key 的最佳实践

3.1 使用稳定的唯一标识符

尽量避免使用数组索引作为 key，因为数组的顺序可能会发生变化，从而导致渲染和性能问题。如果列表项的顺序可能发生变化，应该使用稳定且唯一的标识符（如 id）作为 key。

不推荐的做法：使用数组索引作为 key

function List() {
  const items = ['Apple', 'Banana', 'Orange'];

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

在上述代码中，key={index} 是不推荐的做法，因为如果数组的顺序发生变化（例如添加或删除项），React 无法正确识别每个元素，并且会导致不必要的 DOM 更新。

3.2 确保 key 的唯一性

确保每个列表项的 key 是唯一且不重复的。例如，当渲染一个对象数组时，使用每个对象的唯一 id 属性。

const products = [
  { id: 1, name: 'Laptop' },
  { id: 2, name: 'Phone' },
  { id: 3, name: 'Tablet' }
];

function ProductList() {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

3.3 不要依赖 key 来控制样式或逻辑

key 的唯一作用是帮助 React 高效地识别元素并更新 DOM，不能通过 key 来控制元素的样式或逻辑。key 的作用与样式和功能逻辑无关。

4. 动态添加和删除列表项

React 的列表渲染支持动态更新，常见的操作有添加、删除和重新排序列表项。每次列表项变化时，React 会基于 key 进行最小化的 DOM 更新。

4.1 动态添加项

import { useState } from 'react';

function DynamicList() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);
  const addItem = () => {
    setItems([...items, 'Grapes']);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

点击 “Add Item” 按钮时，items 数组会添加一个新的项，并触发组件重新渲染。

4.2 动态删除项

import { useState } from 'react';

function DynamicList() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);
  const removeItem = (index) => {
    const newItems = items.filter((item, i) => i !== index);
    setItems(newItems);
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

在这个例子中，removeItem 函数用于从列表中删除项。当删除项时，React 会基于 key 正确更新 UI。

5. 参考资料

出站链接

站内链接

列表和 key 是 React 中非常重要的概念，了解它们的工作机制能够让你更高效地构建动态、响应式的应用。在处理大量数据时，正确使用 key 是确保 React 应用保持高性能的关键。