React.js 小書 Lesson13 - 渲染列表數據

Alan 發布于2019-08-21 17:33 / 3548人閱讀

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

React.js 小書 Lesson13 - 渲染列表數據

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

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

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

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

React.js 當然也允許我們處理列表數據，但在使用 React.js 處理列表數據的時候，需要掌握一些規則。我們這一節會專門討論這方面的知識。

渲染存放 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" }
]

如果現在要把這個數組里面的數據渲染頁面上要怎么做？開始之前要補充一個知識。之前說過 JSX 的表達式插入 {} 里面可以放任何數據，如果我們往 {} 里面放一個存放 JSX 元素的數組會怎么樣？

...

class Index extends Component {
  render () {
    return (
      
        {[
          React.js ,
          is ,
          good
        ]}
      
    )
  }
}

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

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

審查一下元素，看看會發現什么：

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

使用 map 渲染列表數據

知道這一點以后你就可以知道怎么用循環把元素渲染到頁面上：循環上面用戶數組里面的每一個用戶，為每個用戶數據構建一個 JSX，然后把 JSX 放到一個新的數組里面，再把新的數組插入 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 = [] // 保存每個用戶渲染以后 JSX 的數組
    for (let user of users) {
      usersElements.push( // 循環每個用戶，構建 JSX，push 到數組中
        
          姓名：{user.username}
          年齡：{user.age}
          性別：{user.gender}
          
        
      )
    }

    return (
      {usersElements}
    )
  }
}

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

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

但我們一般不會手動寫循環來構建列表的 JSX 結構，可以直接用 ES6 自帶的 map（不了解 map 函數的同學可以先了解相關的知識再來回顧這里），代碼可以簡化成：

class Index extends Component {
  render () {
    return (
      
        {users.map((user) => {
          return (
            
              姓名：{user.username}
              年齡：{user.age}
              性別：{user.gender}
              
            
          )
        })}
      
    )
  }
}

這樣的模式在 JavaScript 中非常常見，一般來說，在 React.js 處理列表就是用 map 來處理、渲染的。現在進一步把渲染多帶帶一個用戶的結構抽離出來作為一個組件，繼續優化代碼：

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

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

key! key! key!

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

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

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

a
b
c

假設頁面上有這么3個列表元素，現在改變一下位置：

a
c
b

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

a
b
c

這樣 React.js 就簡單的通過 key 來判斷出來，這兩個列表元素只是交換了位置，可以盡量復用元素內部的結構。

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

在上面的例子當中，每個 user 沒有 id 可以用，可以直接用循環計數器 i 作為 key：

...
class Index extends Component {
  render () {
    return (
      
        {users.map((user, i) => )}
      
    )
  }
}
...

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

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

GPU云服務器云服務器 React.js react.js cdn 小書 Lesson

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89661.html

寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
React.js 小書 Lesson12 - state vs props

摘要：的主要作用是用于組件保存控制修改自己的可變狀態。它們都可以決定組件的行為和顯示形態。但是它們的職責其實非常明晰分明是讓組件控制自己的狀態，是讓外部對組件自己進行配置。下一節中我們將介紹小書渲染列表數據。 React.js 小書 Lesson12 - state vs props 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesso...

call_me_R 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson26 - 實戰分析：評論功能（五）

摘要：修改請輸入用戶名請輸入評論內容我們增加了和分別用于加載和保存評論列表數據。現在發布評論，然后刷新可以看到我們的評論并不會像以前一樣消失。非常的不錯，持久化評論的功能也完成了。下一節中我們將介紹小書實戰分析評論功能六。 React.js 小書 Lesson26 - 實戰分析：評論功能（五）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...

Nekron 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson16 - 實戰分析：評論功能（三）

摘要：但是給傳遞的評論數據并沒有傳遞給，所以現在發表評論時沒有反應的。包括實現功能之前先理解分析需求，劃分組件。到此為止，小書的第一階段已經結束，你可以利用這些知識點來構建簡單的功能模塊了。 React.js 小書 Lesson16 - 實戰分析：評論功能（三）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson16 轉載請注明出處...

Gilbertat 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson14 - 實戰分析：評論功能（一）

摘要：對于上面這個評論功能，可以粗略地劃分成以下幾部分評論功能的整體用一個叫的組件包含起來。每個評論列表項由獨立的組件負責顯示，這個組件被所使用。下一節中我們將介紹小書實戰分析評論功能二。 React.js 小書 Lesson14 - 實戰分析：評論功能（一）本文作者：胡子大哈本文原文：http://react.huziketang.com/blog/lesson14 轉載請注明出處，保...

QiuyueZhong 2019-08-21 17:34 評論0 收藏0