我们一起聊聊React列表渲染与Key-51CTO.COM

在React中，列表渲染是一种常见的模式，它允许我们基于数组的内容动态生成React元素。同时，为了提高React的性能并确保正确的元素更新，我们需要为动态生成的元素添加唯一的 key 属性。

列表渲染

列表渲染通常使用map函数，它会遍历数组中的每个元素，并返回一个新的React元素数组。JSX 允许在大括号中嵌入任何表达式，所以我们可以内联 map() 返回的结果：

import React from 'react';


function ListRendering() {
  const items = ['Item 1', 'Item 2', 'Item 3'];


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


  return <ul>{itemList}</ul>;
}


export default ListRendering;1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

在上述例子中，items 是一个包含字符串的数组。通过map函数，我们遍历数组并为每个元素创建一个<li>元素。注意，每个<li>元素都有一个唯一的key属性，通常使用元素的索引作为key。这有助于React在更新时更准确地识别每个元素。

添加 key 属性的原因

React的更新算法： React使用key属性来优化元素更新的过程。通过使用key，React能够更有效地确定哪些元素被添加、删除或修改，从而避免不必要的重新渲染。
帮助React识别元素：每个React元素都应该有一个唯一的key，以便React能够区分它们。这对于处理动态列表、排序或筛选等操作非常重要。

使用元素属性作为 key 的注意事项

你可能会想直接把数组项的索引当作 key 值来用，实际上，如果你没有显式地指定 key 值，React 确实默认会这么做。但是数组项的顺序在插入、删除或者重新排序等操作中会发生改变，此时把索引顺序用作 key 值会产生一些微妙且令人困惑的 bug。

与之类似，请不要在运行过程中动态地产生 key，像是 key={Math.random()} 这种方式。这会导致每次重新渲染后的 key 值都不一样，从而使得所有的组件和 DOM 元素每次都要重新创建。这不仅会造成运行变慢的问题，更有可能导致用户输入的丢失。所以，使用能从给定数据中稳定取得的值才是明智的选择。

有一点需要注意，组件不会把 key 当作 props 的一部分。Key 的存在只对 React 本身起到提示作用。

所以在使用元素属性作为key时，需要确保该属性在列表中是唯一且稳定的。不推荐使用索引作为唯一的key，因为它可能导致一些问题，尤其是在动态操作数组时。

// 不推荐
const itemList = items.map((item, index) => (
  <li key={index}>{item}</li>
));1.
2.
3.
4.

最好的做法是使用每个元素的唯一标识符作为key，例如元素在数据中的ID。

const itemsWithId = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
];


const itemList = itemsWithId.map((item) => (
  <li key={item.id}>{item.text}</li>
));1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

没有稳定的 ID 的情况

如果数据中没有唯一且稳定的ID，你可以使用一些哈希函数或库来生成一个稳定的ID，确保在数据变化时仍然能够提供唯一的key。

import { v4 as uuidv4 } from 'uuid';


const items = ['Item 1', 'Item 2', 'Item 3'];


const itemList = items.map((item) => (
  <li key={uuidv4()}>{item}</li>
));1.
2.
3.
4.
5.
6.
7.
8.
9.

在这个例子中，我们使用了uuid库来生成一个唯一的ID作为key。

总之，列表渲染是React中常见的模式，使用key属性可以确保React在处理动态列表时更加高效和准确。

马上一练

数组生成菜谱列表，其中每个菜谱，都用

来显示它的名称，并在里列出它所需的原料。export const recipes = [
  {
    id: 'greek-salad',
    name: '希腊沙拉',
    ingredients: ['西红柿', '黄瓜', '洋葱', '油橄榄', '羊奶酪'],
  },
  {
    id: 'hawaiian-pizza',
    name: '夏威夷披萨',
    ingredients: ['披萨饼皮', '披萨酱', '马苏里拉奶酪', '火腿', '菠萝'],
  },
  {
    id: 'hummus',
    name: '鹰嘴豆泥',
    ingredients: ['鹰嘴豆', '橄榄油', '蒜瓣', '柠檬', '芝麻酱'],
  },
];

export default function RecipeList() {
  return (
    <div>
      <h1>菜谱</h1>
      {recipes.map(recipe =>
        <div key={recipe.id}>
          <h2>{recipe.name}</h2>
          <ul>
            {recipe.ingredients.map(ingredient =>
              <li key={ingredient}>
                {ingredient}
              </li>
            )}
          </ul>
        </div>
      )}
    </div>
  );
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.