我們一起聊聊React列表渲染與Key
在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>
);
}
