1.js中轉(zhuǎn)化列表

首先使用map()對數(shù)組進行翻倍，得到一個新的數(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.渲染多個組件

可以通過使用{}在jsx內(nèi)構(gòu)建一個元素集合
現(xiàn)在使用js中的map()方法遍歷numbers數(shù)組，對數(shù)組中的每個元素返回<li>標(biāo)簽，然后我們得到一個listItems

const numbers = [1,2,3,4,5];
const listItems = numbers.map((current,index,arr)=>{
    return (
        <li>{current*2}</li>
    )
})
//把得到的li列表插入ul中并且渲染出來
ReactDOM.render(
    <ul>{listItems}</ul>,document.getElementById('root')
)

3.基礎(chǔ)列表組件

有時候你需要渲染一個列表到組件中
我們把前面的例子重構(gòu)成一個組件，組件接收numbers數(shù)組為參數(shù)，輸出一個無序列表

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)我們運行這段代碼，將會看到一個警告 a key should be provided for list items，意思是當(dāng)你創(chuàng)建一個元素時，必須包括一個特殊的 key 屬性。

這有點類似vue，我們需要給每個元素一個key來解決這個警告，每個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中某些元素被添加或者刪除的時候，幫助React去識別哪一些元素發(fā)生了變化，因此應(yīng)當(dāng)在 數(shù)組 中的每一個元素添加一個key

一個元素的key最好是這個元素列表中 獨一無二 的字符串，我們通常用來自數(shù)字的id，或者使用index

const test = arr.map((current,index,arr)=>{
    //當(dāng)其中有一個id的時候
    return(
        <li key={current.id}>{current.text}</li>
    )
    //沒有id 的時候可以使用index
    return(
        <li key={index}>{current.text}</li>
    )
})

如果列表可以重新排序，我們不建議使用索引來進行排序，因為這會導(dǎo)致渲染變得很慢。如果你想要了解更多，請點擊深度解析key的必要性

5.用keys提取組件

元素的key只有在他和他的兄弟節(jié)點對比的時候才有意義

比如你提取一個<ListItem />組件，應(yīng)該將key保存在數(shù)組中，這個ListItem這個組件上，而不是他里面的li上

function ListItem(props) {
  // 對啦！這里不需要指定key:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 又對啦！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)該是唯一

①在他們的兄弟間，也就是同一個數(shù)組中藥唯一
②不需要全局唯一，就是2個數(shù)組中可以一樣

注意：
key是用來作為React的提示，如果你需要傳遞與key相同的值，需要使用屬性來傳遞。

const content = posts.map((post) =>
  <Post
    key={post.id} //無法讀取
    id={post.id}  //可以讀取
    title={post.title} />  //可以讀取
);

以上的例子中，可以讀出props.id，但是無法讀出props.key

7.在jsx中嵌入map()

JSX允許在大括號中嵌入任何表達式，所以我們可以在map()中這樣使用：

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />

      )}
    </ul>
  );
}

這么做有時候會使得你的代碼更加清晰，但是常常這種風(fēng)格也會被濫用，如果一個map()嵌套了太多層，此時可能就是需要提取組件的時候了。