1.js中轉(zhuǎn)化列表
首先使用map()對(duì)數(shù)組進(jìn)行翻倍侍郭，得到一個(gè)新的數(shù)組doubled
const numbers = [1,2,3,4,5];
const doubled = numbers.map((current,index,arr)=>{
return current*2
})
console.log(doubled) //[2,4,6,8,10];
在React中莹汤，把數(shù)組轉(zhuǎn)換為數(shù)列元素的方法是相似的帝牡。
2.渲染多個(gè)組件
可以通過(guò)使用{}在jsx內(nèi)構(gòu)建一個(gè)元素集合
現(xiàn)在使用js中的map()方法遍歷numbers數(shù)組婴洼，對(duì)數(shù)組中的每個(gè)元素返回<li>標(biāo)簽距误，然后我們得到一個(gè)listItems
const numbers = [1,2,3,4,5];
const listItems = numbers.map((current,index,arr)=>{
return (
<li>{current*2}</li>
)
})
//把得到的li列表插入ul中并且渲染出來(lái)
ReactDOM.render(
<ul>{listItems}</ul>,document.getElementById('root')
)
3.基礎(chǔ)列表組件
有時(shí)候你需要渲染一個(gè)列表到組件中
我們把前面的例子重構(gòu)成一個(gè)組件喇嘱，組件接收numbers數(shù)組為參數(shù)茉贡，輸出一個(gè)無(wú)序列表
function NumberList(props){
const numbers = props.numbers;
const listItems = numbers.map((current,index,arr)=>{
return <li>{current*2}</li>
})
return (
<ul className="hellos">{listItems}</ul>
)
}
const numbers = [1,2,3,4,5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
)
當(dāng)我們運(yùn)行這段代碼，將會(huì)看到一個(gè)警告 a key should be provided for list items者铜，意思是當(dāng)你創(chuàng)建一個(gè)元素時(shí)腔丧，必須包括一個(gè)特殊的 key 屬性。
這有點(diǎn)類似vue作烟，我們需要給每個(gè)元素一個(gè)key來(lái)解決這個(gè)警告愉粤，每個(gè)li的key必須不相同
function NumberList(props){
const numbers = props.numbers;
const listItems = numbers.map((current,index,arr)=>{
return <li key={current}>{current*2}</li>
})
return (
<ul className="hellos">{listItems}</ul>
)
}
4.keys
keys可以在dom中某些元素被添加或者刪除的時(shí)候，幫助React去識(shí)別哪一些元素發(fā)生了變化拿撩，因此應(yīng)當(dāng)在 數(shù)組 中的每一個(gè)元素添加一個(gè)key
一個(gè)元素的key最好是這個(gè)元素列表中 獨(dú)一無(wú)二 的字符串衣厘，我們通常用來(lái)自數(shù)字的id，或者使用index
const test = arr.map((current,index,arr)=>{
//當(dāng)其中有一個(gè)id的時(shí)候
return(
<li key={current.id}>{current.text}</li>
)
//沒(méi)有id 的時(shí)候可以使用index
return(
<li key={index}>{current.text}</li>
)
})
如果列表可以重新排序，我們不建議使用索引來(lái)進(jìn)行排序影暴，因?yàn)檫@會(huì)導(dǎo)致渲染變得很慢错邦。如果你想要了解更多，請(qǐng)點(diǎn)擊深度解析key的必要性
5.用keys提取組件
元素的key只有在他和他的兄弟節(jié)點(diǎn)對(duì)比的時(shí)候才有意義
比如你提取一個(gè)<ListItem />組件型宙，應(yīng)該將key保存在數(shù)組中撬呢，這個(gè)ListItem這個(gè)組件上，而不是他里面的li上
function ListItem(props) {
// 對(duì)啦妆兑！這里不需要指定key:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 又對(duì)啦魂拦！key應(yīng)該在數(shù)組的上下文中被指定
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
6.元素的key在他們兄弟元素之間應(yīng)該是唯一
①在他們的兄弟間，也就是同一個(gè)數(shù)組中藥唯一
②不需要全局唯一搁嗓，就是2個(gè)數(shù)組中可以一樣
注意：
key是用來(lái)作為React的提示芯勘，如果你需要傳遞與key相同的值，需要使用屬性來(lái)傳遞腺逛。
const content = posts.map((post) =>
<Post
key={post.id} //無(wú)法讀取
id={post.id} //可以讀取
title={post.title} /> //可以讀取
);
以上的例子中荷愕，可以讀出props.id，但是無(wú)法讀出props.key
7.在jsx中嵌入map()
JSX允許在大括號(hào)中嵌入任何表達(dá)式屉来，所以我們可以在map()中這樣使用：
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
這么做有時(shí)候會(huì)使得你的代碼更加清晰路翻，但是常常這種風(fēng)格也會(huì)被濫用，如果一個(gè)map()嵌套了太多層茄靠，此時(shí)可能就是需要提取組件的時(shí)候了。
