React學習筆記之列表渲染示例詳解

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

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

前言

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

示例詳解：

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

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

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

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的指定需要是其值是唯一的，因為它能幫助框架更好的識別列的改變，添加和刪除，如果有穩(wěn)定的唯一鍵值就使用唯一鍵值，如果沒有可以使用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構(gòu)造好列表外，map的語法還可以內(nèi)嵌到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>
 );
}

總結(jié)

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

您可能感興趣的文章: