在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;
在上述例子中，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>
));
最好的做法是使用每个元素的唯一标识符作为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>
));
没有稳定的 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>
));
在这个例子中，我们使用了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>
);
}
原文地址：https://mp.weixin.qq.com/s/ruf5XUO_5v0MbU-Wpy7Wxg
