前言

本文主要給大家介紹了關于React列表渲染的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

示例詳解：

列表渲染也很簡單，利用map方法返回一個新的渲染列表即可，例如：

const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>  <li>{number}</li>);ReactDOM.render(  <ul>{listItems}</ul>, document.getElementById('root'));

基礎列表組件的構造中，有一個重要的屬性值key需要你進行指定，這個很重要，和幫助框架進行性能優化有關，具體深入原因后續會繼續了解，先來看例子：

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的指定需要是其值是唯一的，因為它能幫助框架更好的識別列的改變，添加和刪除，如果有穩定的唯一鍵值就使用唯一鍵值，如果沒有可以使用index來進行標識，但是不提倡在列表會進行頻繁排序的時候使用index，因為這樣會使得性能下降。

例如：

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>);

出來以上用map構造好列表外，map的語法還可以內嵌到jsx語法中，只要加上{}即可，寫法多種多樣，可以選一種自己順眼的哦，呵呵噠。

例如以下兩種寫法是一樣滴:

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> );}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對錯新站長站的支持。