在React中，列表渲染是一種常見(jiàn)的模式，它允許我們基于數(shù)組的內(nèi)容動(dòng)態(tài)生成React元素。同時(shí)，為了提高React的性能并確保正確的元素更新，我們需要為動(dòng)態(tài)生成的元素添加唯一的 key 屬性。

列表渲染

列表渲染通常使用map函數(shù)，它會(huì)遍歷數(shù)組中的每個(gè)元素，并返回一個(gè)新的React元素?cái)?shù)組。JSX 允許在大括號(hào)中嵌入任何表達(dá)式，所以我們可以?xún)?nèi)聯(lián) map() 返回的結(jié)果：

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 是一個(gè)包含字符串的數(shù)組。通過(guò)map函數(shù)，我們遍歷數(shù)組并為每個(gè)元素創(chuàng)建一個(gè)<li>元素。注意，每個(gè)<li>元素都有一個(gè)唯一的key屬性，通常使用元素的索引作為key。這有助于React在更新時(shí)更準(zhǔn)確地識(shí)別每個(gè)元素。

添加 key 屬性的原因

1. React的更新算法： React使用key屬性來(lái)優(yōu)化元素更新的過(guò)程。通過(guò)使用key，React能夠更有效地確定哪些元素被添加、刪除或修改，從而避免不必要的重新渲染。
2. 幫助React識(shí)別元素： 每個(gè)React元素都應(yīng)該有一個(gè)唯一的key，以便React能夠區(qū)分它們。這對(duì)于處理動(dòng)態(tài)列表、排序或篩選等操作非常重要。

使用元素屬性作為 key 的注意事項(xiàng)

你可能會(huì)想直接把數(shù)組項(xiàng)的索引當(dāng)作 key 值來(lái)用，實(shí)際上，如果你沒(méi)有顯式地指定 key 值，React 確實(shí)默認(rèn)會(huì)這么做。但是數(shù)組項(xiàng)的順序在插入、刪除或者重新排序等操作中會(huì)發(fā)生改變，此時(shí)把索引順序用作 key 值會(huì)產(chǎn)生一些微妙且令人困惑的 bug。

與之類(lèi)似，請(qǐng)不要在運(yùn)行過(guò)程中動(dòng)態(tài)地產(chǎn)生 key，像是 key={Math.random()} 這種方式。這會(huì)導(dǎo)致每次重新渲染后的 key 值都不一樣，從而使得所有的組件和 DOM 元素每次都要重新創(chuàng)建。這不僅會(huì)造成運(yùn)行變慢的問(wèn)題，更有可能導(dǎo)致用戶(hù)輸入的丟失。所以，使用能從給定數(shù)據(jù)中穩(wěn)定取得的值才是明智的選擇。

有一點(diǎn)需要注意，組件不會(huì)把 key 當(dāng)作 props 的一部分。Key 的存在只對(duì) React 本身起到提示作用。

所以在使用元素屬性作為key時(shí)，需要確保該屬性在列表中是唯一且穩(wěn)定的。不推薦使用索引作為唯一的key，因?yàn)樗赡軐?dǎo)致一些問(wèn)題，尤其是在動(dòng)態(tài)操作數(shù)組時(shí)。

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

最好的做法是使用每個(gè)元素的唯一標(biāo)識(shí)符作為key，例如元素在數(shù)據(jù)中的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>
));

沒(méi)有穩(wěn)定的 ID 的情況

如果數(shù)據(jù)中沒(méi)有唯一且穩(wěn)定的ID，你可以使用一些哈希函數(shù)或庫(kù)來(lái)生成一個(gè)穩(wěn)定的ID，確保在數(shù)據(jù)變化時(shí)仍然能夠提供唯一的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>
));

在這個(gè)例子中，我們使用了uuid庫(kù)來(lái)生成一個(gè)唯一的ID作為key。

總之，列表渲染是React中常見(jiàn)的模式，使用key屬性可以確保React在處理動(dòng)態(tài)列表時(shí)更加高效和準(zhǔn)確。

馬上一練

數(shù)組生成菜譜列表，其中每個(gè)菜譜，都用

來(lái)顯示它的名稱(chēng)，并在里列出它所需的原料。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>
  );
}