我们一起聊聊React列表渲染与Key

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

列表渲染

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

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在更新时更准确地识别每个元素。Ebv28资讯网——每日最新资讯28at.com

添加 key 属性的原因

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

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

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

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

有一点需要注意，组件不会把 key 当作 props 的一部分。Key 的存在只对 React 本身起到提示作用。Ebv28资讯网——每日最新资讯28at.com

所以在使用元素属性作为key时，需要确保该属性在列表中是唯一且稳定的。不推荐使用索引作为唯一的key，因为它可能导致一些问题，尤其是在动态操作数组时。Ebv28资讯网——每日最新资讯28at.com

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

最好的做法是使用每个元素的唯一标识符作为key，例如元素在数据中的ID。Ebv28资讯网——每日最新资讯28at.com

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。Ebv28资讯网——每日最新资讯28at.com

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。Ebv28资讯网——每日最新资讯28at.com

总之，列表渲染是React中常见的模式，使用key属性可以确保React在处理动态列表时更加高效和准确。Ebv28资讯网——每日最新资讯28at.com

马上一练

数组生成菜谱列表，其中每个菜谱，都用Ebv28资讯网——每日最新资讯28at.com

来显示它的名称，并在里列出它所需的原料。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>  );}

Ebv28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-70484-0.html我们一起聊聊React列表渲染与Key

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 故障现场 | 这个死锁出奇的诡异

下一篇： CSS问题：推荐几个超好看渐变色！项目中可用