前言
專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)江西免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
本文主要給大家介紹了關(guān)于React列表渲染的相關(guān)內(nèi)容,分享出來(lái)供大家參考學(xué)習(xí),下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧。
示例詳解:
列表渲染也很簡(jiǎn)單,利用map方法返回一個(gè)新的渲染列表即可,例如:
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('root') );
基礎(chǔ)列表組件的構(gòu)造中,有一個(gè)重要的屬性值key需要你進(jìn)行指定,這個(gè)很重要,和幫助框架進(jìn)行性能優(yōu)化有關(guān),具體深入原因后續(xù)會(huì)繼續(xù)了解,先來(lái)看例子:
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') );
需要注意的是key的指定需要是其值是唯一的,因?yàn)樗軒椭蚣芨玫淖R(shí)別列的改變,添加和刪除,如果有穩(wěn)定的唯一鍵值就使用唯一鍵值,如果沒(méi)有可以使用index來(lái)進(jìn)行標(biāo)識(shí),但是不提倡在列表會(huì)進(jìn)行頻繁排序的時(shí)候使用index,因?yàn)檫@樣會(huì)使得性能下降。
例如:
const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li> ); const todoItems = todos.map((todo, index) => // Only do this if items have no stable IDs <li key={index}> {todo.text} </li> );
出來(lái)以上用map構(gòu)造好列表外,map的語(yǔ)法還可以內(nèi)嵌到j(luò)sx語(yǔ)法中,只要加上{}即可,寫法多種多樣,可以選一種自己順眼的哦,呵呵噠。
例如以下兩種寫法是一樣滴:
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <ul> {listItems} </ul> ); } function NumberList(props) { const numbers = props.numbers; return ( <ul> {numbers.map((number) => <ListItem key={number.toString()} value={number} /> )} </ul> ); }
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
網(wǎng)站標(biāo)題:React學(xué)習(xí)筆記之列表渲染示例詳解
URL地址:http://muchs.cn/article6/gppcig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站內(nèi)鏈、小程序開(kāi)發(fā)、網(wǎng)站改版、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)