React學(xué)習(xí)筆記之列表渲染示例詳解

更新時(shí)間：2017年08月22日 09:20:53 作者：Zhang Xiao

最近在學(xué)習(xí)React，學(xué)習(xí)到了列表渲染這一塊，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以自己來(lái)總結(jié)下，下面這篇文章主要給大家介紹了關(guān)于React學(xué)習(xí)筆記之列表渲染的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。

前言

本文主要給大家介紹了關(guān)于React列表渲染的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話(huà)不多說(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ǔ)法還可以?xún)?nèi)嵌到j(luò)sx語(yǔ)法中，只要加上{}即可，寫(xiě)法多種多樣，可以選一種自己順眼的哦，呵呵噠。

例如以下兩種寫(xiě)法是一樣滴:

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ì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

React組件創(chuàng)建與事件綁定的實(shí)現(xiàn)方法
react事件綁定時(shí)。this并不會(huì)指向當(dāng)前DOM元素。往往使用bind來(lái)改變this指向，今天通過(guò)本文給大家介紹React事件綁定的方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-12-12
關(guān)于react ant 組件 Select下拉框值回顯的問(wèn)題
這篇文章主要介紹了關(guān)于react ant 組件 Select下拉框值回顯的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能
這篇文章主要介紹了react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-08-08
在?React?Native?中給第三方庫(kù)打補(bǔ)丁的過(guò)程解析
這篇文章主要介紹了在?React?Native?中給第三方庫(kù)打補(bǔ)丁的過(guò)程解析,有時(shí)使用了某個(gè)React Native 第三方庫(kù)，可是它有些問(wèn)題，我們不得不修改它的源碼，本文介紹如何修改源碼又不會(huì)意外丟失修改結(jié)果的方法，需要的朋友可以參考下
2022-08-08
react中的DOM操作實(shí)現(xiàn)
某些情況下需要在典型數(shù)據(jù)流外強(qiáng)制修改子代。要修改的子代可以是 React 組件實(shí)例，也可以是 DOM 元素。這時(shí)就要用到refs來(lái)操作DOM，本文詳細(xì)的介紹一下使用，感興趣的可以了解一下
2021-06-06
TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析
這篇文章主要為大家介紹了TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
react?hooks頁(yè)面實(shí)時(shí)刷新方式(setInterval)
這篇文章主要介紹了react?hooks頁(yè)面實(shí)時(shí)刷新方式(setInterval),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
使用React實(shí)現(xiàn)一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表的示例代碼
這篇文章我們將詳細(xì)講解如何建立一個(gè)這樣簡(jiǎn)單的列表,文章通過(guò)代碼示例介紹的非常詳細(xì),對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-08-08
react-pdf實(shí)現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁(yè)面展示
這篇文章主要介紹了react-pdf實(shí)現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁(yè)面展示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
React配置代理服務(wù)器的5種方法及使用場(chǎng)景
這篇文章主要介紹了React配置代理服務(wù)器的5種方法,無(wú)論使用哪種方法,都需要確保代理服務(wù)器的地址和端口正確,并且在配置完成后重新啟動(dòng)React開(kāi)發(fā)服務(wù)器,使配置生效,需要的朋友可以參考下
2023-08-08