摘要：一般來(lái)說(shuō)，的值可以直接后臺(tái)數(shù)據(jù)返回的，因?yàn)楹笈_(tái)的都是唯一的。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能一。

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson13

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

列表數(shù)據(jù)在前端非常常見(jiàn)，我們經(jīng)常要處理這種類型的數(shù)據(jù)，例如文章列表、評(píng)論列表、用戶列表…一個(gè)前端工程師幾乎每天都需要跟列表數(shù)據(jù)打交道。

React.js 當(dāng)然也允許我們處理列表數(shù)據(jù)，但在使用 React.js 處理列表數(shù)據(jù)的時(shí)候，需要掌握一些規(guī)則。我們這一節(jié)會(huì)專門討論這方面的知識(shí)。

假設(shè)現(xiàn)在我們有這么一個(gè)用戶列表數(shù)據(jù)，存放在一個(gè)數(shù)組當(dāng)中：

const users = [
  { username: "Jerry", age: 21, gender: "male" },
  { username: "Tomy", age: 22, gender: "male" },
  { username: "Lily", age: 19, gender: "female" },
  { username: "Lucy", age: 20, gender: "female" }
]

如果現(xiàn)在要把這個(gè)數(shù)組里面的數(shù)據(jù)渲染頁(yè)面上要怎么做？開(kāi)始之前要補(bǔ)充一個(gè)知識(shí)。之前說(shuō)過(guò) JSX 的表達(dá)式插入 {} 里面可以放任何數(shù)據(jù)，如果我們往 {} 里面放一個(gè)存放 JSX 元素的數(shù)組會(huì)怎么樣？

...

class Index extends Component {
  render () {
    return (
      

        {[
          React.js ,
          is ,
          good
        ]}
      
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
)

我們往 JSX 里面塞了一個(gè)數(shù)組，這個(gè)數(shù)組里面放了一些 JSX 元素（其實(shí)就是 JavaScript 對(duì)象）。到瀏覽器中，你在頁(yè)面上會(huì)看到：

審查一下元素，看看會(huì)發(fā)現(xiàn)什么：

React.js 把插入表達(dá)式數(shù)組里面的每一個(gè) JSX 元素一個(gè)個(gè)羅列下來(lái)，渲染到頁(yè)面上。所以這里有個(gè)關(guān)鍵點(diǎn)：如果你往 {} 放一個(gè)數(shù)組，React.js 會(huì)幫你把數(shù)組里面一個(gè)個(gè)元素羅列并且渲染出來(lái)。

知道這一點(diǎn)以后你就可以知道怎么用循環(huán)把元素渲染到頁(yè)面上：循環(huán)上面用戶數(shù)組里面的每一個(gè)用戶，為每個(gè)用戶數(shù)據(jù)構(gòu)建一個(gè) JSX，然后把 JSX 放到一個(gè)新的數(shù)組里面，再把新的數(shù)組插入 render 方法的 JSX 里面。看看代碼怎么寫：

const users = [
  { username: "Jerry", age: 21, gender: "male" },
  { username: "Tomy", age: 22, gender: "male" },
  { username: "Lily", age: 19, gender: "female" },
  { username: "Lucy", age: 20, gender: "female" }
]

class Index extends Component {
  render () {
    const usersElements = [] // 保存每個(gè)用戶渲染以后 JSX 的數(shù)組
    for (let user of users) {
      usersElements.push( // 循環(huán)每個(gè)用戶，構(gòu)建 JSX，push 到數(shù)組中
        

          
姓名：{user.username}
          
年齡：{user.age}
          
性別：{user.gender}
          

        
      )
    }

    return (
      
{usersElements}
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
)

這里用了一個(gè)新的數(shù)組 usersElements，然后循環(huán) users 數(shù)組，為每個(gè) user 構(gòu)建一個(gè) JSX 結(jié)構(gòu)，然后 push 到 usersElements 中。然后直接用表達(dá)式插入，把這個(gè) userElements 插到 return 的 JSX 當(dāng)中。因?yàn)?React.js 會(huì)自動(dòng)化幫我們把數(shù)組當(dāng)中的 JSX 羅列渲染出來(lái)，所以可以看到頁(yè)面上顯示：

但我們一般不會(huì)手動(dòng)寫循環(huán)來(lái)構(gòu)建列表的 JSX 結(jié)構(gòu)，可以直接用 ES6 自帶的 map（不了解 map 函數(shù)的同學(xué)可以先了解相關(guān)的知識(shí)再來(lái)回顧這里），代碼可以簡(jiǎn)化成：

class Index extends Component {
  render () {
    return (
      

        {users.map((user) => {
          return (
            

              
姓名：{user.username}
              
年齡：{user.age}
              
性別：{user.gender}
              

            
          )
        })}
      
    )
  }
}

這樣的模式在 JavaScript 中非常常見(jiàn)，一般來(lái)說(shuō)，在 React.js 處理列表就是用 map 來(lái)處理、渲染的。現(xiàn)在進(jìn)一步把渲染多帶帶一個(gè)用戶的結(jié)構(gòu)抽離出來(lái)作為一個(gè)組件，繼續(xù)優(yōu)化代碼：

const users = [
  { username: "Jerry", age: 21, gender: "male" },
  { username: "Tomy", age: 22, gender: "male" },
  { username: "Lily", age: 19, gender: "female" },
  { username: "Lucy", age: 20, gender: "female" }
]

class User extends Component {
  render () {
    const { user } = this.props
    return (
      

        
姓名：{user.username}
        
年齡：{user.age}
        
性別：{user.gender}
        

      
    )
  }
}

class Index extends Component {
  render () {
    return (
      

        {users.map((user) => )}
      
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
)

這里把負(fù)責(zé)展示用戶數(shù)據(jù)的 JSX 結(jié)構(gòu)抽離成一個(gè)組件 User ，并且通過(guò) props 把 user 數(shù)據(jù)作為組件的配置參數(shù)傳進(jìn)去；這樣改寫 Index 就非常清晰了，看一眼就知道負(fù)責(zé)渲染 users 列表，而用的組件是 User。

現(xiàn)在代碼運(yùn)作正常，好像沒(méi)什么問(wèn)題。打開(kāi)控制臺(tái)看看：

React.js 報(bào)錯(cuò)了。如果需要詳細(xì)解釋這里報(bào)錯(cuò)的原因，估計(jì)要多帶帶寫半本書。但可以簡(jiǎn)單解釋一下。

React.js 的是非常高效的，它高效依賴于所謂的 Virtual-DOM 策略。簡(jiǎn)單來(lái)說(shuō)，能復(fù)用的話 React.js 就會(huì)盡量復(fù)用，沒(méi)有必要的話絕對(duì)不碰 DOM。對(duì)于列表元素來(lái)說(shuō)也是這樣，但是處理列表元素的復(fù)用性會(huì)有一個(gè)問(wèn)題：元素可能會(huì)在一個(gè)列表中改變位置。例如：

a
b
c

假設(shè)頁(yè)面上有這么3個(gè)列表元素，現(xiàn)在改變一下位置：

a
c
b

c 和 b 的位置互換了。但其實(shí) React.js 只需要交換一下 DOM 位置就行了，但是它并不知道其實(shí)我們只是改變了元素的位置，所以它會(huì)重新渲染后面兩個(gè)元素（再執(zhí)行 Virtual-DOM 策略），這樣會(huì)大大增加 DOM 操作。但如果給每個(gè)元素加上唯一的標(biāo)識(shí)，React.js 就可以知道這兩個(gè)元素只是交換了位置：

a
b
c

這樣 React.js 就簡(jiǎn)單的通過(guò) key 來(lái)判斷出來(lái)，這兩個(gè)列表元素只是交換了位置，可以盡量復(fù)用元素內(nèi)部的結(jié)構(gòu)。

這里沒(méi)聽(tīng)懂沒(méi)有關(guān)系，后面有機(jī)會(huì)會(huì)繼續(xù)講解這部分內(nèi)容。現(xiàn)在只需要記住一個(gè)簡(jiǎn)單的規(guī)則：對(duì)于用表達(dá)式套數(shù)組羅列到頁(yè)面上的元素，都要為每個(gè)元素加上 key 屬性，這個(gè) key 必須是每個(gè)元素唯一的標(biāo)識(shí)。一般來(lái)說(shuō)，key 的值可以直接后臺(tái)數(shù)據(jù)返回的 id，因?yàn)楹笈_(tái)的 id 都是唯一的。

在上面的例子當(dāng)中，每個(gè) user 沒(méi)有 id 可以用，可以直接用循環(huán)計(jì)數(shù)器 i 作為 key：

...
class Index extends Component {
  render () {
    return (
      

        {users.map((user, i) => )}
      
    )
  }
}
...

再看看，控制臺(tái)已經(jīng)沒(méi)有錯(cuò)誤信息了。但這是不好的做法，這只是掩耳盜鈴（具體原因大家可以自己思考一下）。記住一點(diǎn)：在實(shí)際項(xiàng)目當(dāng)中，如果你的數(shù)據(jù)順序可能發(fā)生變化，標(biāo)準(zhǔn)做法是最好是后臺(tái)數(shù)據(jù)返回的 id 作為列表元素的 key。

下一節(jié)中我們將介紹《React.js 小書 Lesson14 - 實(shí)戰(zhàn)分析：評(píng)論功能（一）》。