在React中,列表渲染是一種常見的模式,它允許我們基于數(shù)組的內(nèi)容動態(tài)生成React元素。同時,為了提高React的性能并確保正確的元素更新,我們需要為動態(tài)生成的元素添加唯一的 key 屬性。
列表渲染通常使用map函數(shù),它會遍歷數(shù)組中的每個元素,并返回一個新的React元素數(shù)組。JSX 允許在大括號中嵌入任何表達式,所以我們可以內(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 是一個包含字符串的數(shù)組。通過map函數(shù),我們遍歷數(shù)組并為每個元素創(chuàng)建一個<li>元素。注意,每個<li>元素都有一個唯一的key屬性,通常使用元素的索引作為key。這有助于React在更新時更準確地識別每個元素。
你可能會想直接把數(shù)組項的索引當作 key 值來用,實際上,如果你沒有顯式地指定 key 值,React 確實默認會這么做。但是數(shù)組項的順序在插入、刪除或者重新排序等操作中會發(fā)生改變,此時把索引順序用作 key 值會產(chǎn)生一些微妙且令人困惑的 bug。
與之類似,請不要在運行過程中動態(tài)地產(chǎn)生 key,像是 key={Math.random()} 這種方式。這會導致每次重新渲染后的 key 值都不一樣,從而使得所有的組件和 DOM 元素每次都要重新創(chuàng)建。這不僅會造成運行變慢的問題,更有可能導致用戶輸入的丟失。所以,使用能從給定數(shù)據(jù)中穩(wěn)定取得的值才是明智的選擇。
有一點需要注意,組件不會把 key 當作 props 的一部分。Key 的存在只對 React 本身起到提示作用。
所以在使用元素屬性作為key時,需要確保該屬性在列表中是唯一且穩(wěn)定的。不推薦使用索引作為唯一的key,因為它可能導致一些問題,尤其是在動態(tài)操作數(shù)組時。
// 不推薦const itemList = items.map((item, index) => ( <li key={index}>{item}</li>));
最好的做法是使用每個元素的唯一標識符作為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>));
如果數(shù)據(jù)中沒有唯一且穩(wěn)定的ID,你可以使用一些哈希函數(shù)或庫來生成一個穩(wěn)定的ID,確保在數(shù)據(jù)變化時仍然能夠提供唯一的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在處理動態(tài)列表時更加高效和準確。
數(shù)組生成菜譜列表,其中每個菜譜,都用
來顯示它的名稱,并在里列出它所需的原料。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> );}
本文鏈接:http://www.www897cc.com/showinfo-26-70484-0.html我們一起聊聊React列表渲染與Key
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com