摘要：一般來說，的值可以直接后臺數(shù)據(jù)返回的，因為后臺的都是唯一的。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能一。

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

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

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

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

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

假設(shè)現(xiàn)在我們有這么一個用戶列表數(shù)據(jù)，存放在一個數(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)在要把這個數(shù)組里面的數(shù)據(jù)渲染頁面上要怎么做？開始之前要補充一個知識。之前說過 JSX 的表達式插入 {} 里面可以放任何數(shù)據(jù)，如果我們往 {} 里面放一個存放 JSX 元素的數(shù)組會怎么樣？

...

class Index extends Component {
  render () {
    return (
      

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

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

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

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

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

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

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 = [] // 保存每個用戶渲染以后 JSX 的數(shù)組
    for (let user of users) {
      usersElements.push( // 循環(huán)每個用戶，構(gòu)建 JSX，push 到數(shù)組中
        

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

        
      )
    }

    return (
      
{usersElements}
    )
  }
}

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

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

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

class Index extends Component {
  render () {
    return (
      

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

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

            
          )
        })}
      
    )
  }
}

這樣的模式在 JavaScript 中非常常見，一般來說，在 React.js 處理列表就是用 map 來處理、渲染的?，F(xiàn)在進一步把渲染多帶帶一個用戶的結(jié)構(gòu)抽離出來作為一個組件，繼續(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")
)

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

現(xiàn)在代碼運作正常，好像沒什么問題。打開控制臺看看：

React.js 報錯了。如果需要詳細解釋這里報錯的原因，估計要多帶帶寫半本書。但可以簡單解釋一下。

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

a
b
c

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

a
c
b

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

a
b
c

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

這里沒聽懂沒有關(guān)系，后面有機會會繼續(xù)講解這部分內(nèi)容?，F(xiàn)在只需要記住一個簡單的規(guī)則：對于用表達式套數(shù)組羅列到頁面上的元素，都要為每個元素加上 key 屬性，這個 key 必須是每個元素唯一的標識。一般來說，key 的值可以直接后臺數(shù)據(jù)返回的 id，因為后臺的 id 都是唯一的。

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

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

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

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

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