React中列表渲染

在上一節中，我們學習了如何在React中實現條件渲染。愛掏網 - it200.com今天我們一起來學習如何在React中實現列表渲染（在Vue中我們可以使用v-for指令）。愛掏網 - it200.com因為在實際開發中我們時常要處理一些列表的渲染，比如在《列表渲染和Vue的v-for指令》一文中示例：

上圖中我們有多個列表的渲染，比如Tweets列表，關注用戶列表等。愛掏網 - it200.com

在React中，處理列表渲染和處理條件渲染類似，需要借助JavaScript的一些原生能力來輔助我們實現列表渲染。愛掏網 - it200.com如果你對這方面知識感興趣的話，歡迎繼續往下閱讀。愛掏網 - it200.com

在開始學習React列表渲染之前，我們很有必要先簡單的回顧JavaScript中有關于循環相關的知識。愛掏網 - it200.com原因很簡單：

簡單地說，循環就是重復做一件事件。愛掏網 - it200.com在MDN中有一張圖形象的闡述了這個概念：

上圖是位農夫為他的家庭準備一周的食物計劃。愛掏網 - it200.com為了完成這個計劃，他或許需要執行一個循環。愛掏網 - it200.com一個循環通常會需要一些特定的條件：

• 一個開始條件：這是循環的起點（比如上圖中的“沒有食材了”）。愛掏網 - it200.com用到代碼中，它被初始化為一個特定的值（常稱初始條件）
• 一個結束條件：這是循環的結束點（比如上圖中的“有足夠的食材嗎？”）。愛掏網 - it200.com用到代碼中，它就是循環的停止標準（常稱結束條件），通常計數器達到一定的值（假設，該農夫整個家庭一周有十種食物就可以滿足）
• 一個迭代器：這通常在每個連續循環上遞增（或遞減）一個計數器，直到達到結束條件。愛掏網 - it200.com比如，農夫能夠每小時收集到兩份食物，每小時后，他收集的食物增量就增加了兩倍，他檢查他是否有足夠的食物。愛掏網 - it200.com如果達到了十份食物（退出條件），該農夫就可以停止收集食物

如果我們用偽代碼來描述上圖中農夫準備食物這樣的場景，可能會像下面這樣：

loop(food=0; foodNeeded=10){
    // 農夫目前的食物為0 ~> 初始條件 food=0
    // 農夫一周需要的食物定量是10 ~> 結束條件 fooNeeded=10

    // 如果農夫當前食物和所需食物數量相等 ~> food = foodNeeded
    if (food = foodNeeded) {
        exit loop; // ~> 退出循環
        // 農夫有足夠的食物了，停止收集食物
    } else {
        food +=2; // 每一個小時，農夫可以收集到兩件食物 ~> 循環迭代計數器 （遞增或遞減）
        // 循環將繼續執行
    }
}

如果我們用JavaScript來實現上述這樣的場景，就可以使用循環語句來處理。愛掏網 - it200.com關鍵是JavaScript中循環有很多種類型，但它們的本質是做同樣的一件事情：

JavaScript中各種循環機制提供了不同的方法去確定循環的開始和結束。愛掏網 - it200.com不同情況下，某一種類型的循環會比其他的循環用起來更簡單。愛掏網 - it200.com

在JavaScript中，最基礎的、最原始的循環語句是for語句、do...while語句和while語句。愛掏網 - it200.com如果用圖來描述的話，大致如下：

while語句

while語句只要指定條件求值為真（true）就會一直執行它的語句塊。愛掏網 - it200.com比如下面這樣的示例：

var n = 0;
var x = 0;
while (n 

在每次循環里，n會增加1，并被加到x上。愛掏網 - it200.com所以，x和n的變化是：

• 第一次完成后：n=1，x=1
• 第二次完成后：n=2，x=3
• 第三次完成后：n=3，x=6

在三次完成后，條件n的結果不再為真，所以循環終止了。愛掏網 - it200.com

for語句

for循環會一直重復執行，直到指定的循環條件為false。愛掏網 - it200.com當一個for循環執行的時候，會發生以下過程：

• 如果有初始化表達式initialExpression，它將被執行。愛掏網 - it200.com這個表達式通常會初始化一個或多個循環計數器，但語法上是允許一個任意復雜度的表達式的。愛掏網 - it200.com這個表達式可以聲明變量
• 計算condition表達式的值。愛掏網 - it200.com如果condition的值是true，循環中的語句會被執行。愛掏網 - it200.com如果condition的值是false，for循環終止。愛掏網 - it200.com如果condition表達式整個都被省略掉了，condition的值會被認為是true
• 循環中的statement被執行。愛掏網 - it200.com如果需要執行多條語句，可以使用塊({...})來包裹這些語句
• 如果有更新表達式incrementExpression，執行更新表達式
• 回到第2步，重新執行

比如下面這樣的小示例：

for (i = 0, len = 3; i 

整個for循環執行過程是這樣：

• 第一次完成后，i=0
• 第二次完成后，i=1
• 第三次完成后，i=2

當i（即可i）時，條件不再為真，循環會終止。愛掏網 - it200.com

do...while語句

do...while語句一直重復直到指定的條件求值得到假值（false）。愛掏網 - it200.com代碼聲明塊（statement）在檢查條件之前會執行一次（至少會執行一次）。愛掏網 - it200.com要執行多條件語句（語句塊），要使用塊語句（{...}）包裹起來。愛掏網 - it200.com如果條件（condition）為值（true），statement將再次執行。愛掏網 - it200.com在每個執行的結束會進行條件的檢查。愛掏網 - it200.com當condition為假（false），執行會停止并且把控制權交回給do...while后面的語句。愛掏網 - it200.com

比如下面的小示例：

var i = 0;
do {
    i += 1;
    console.log(i);
} while (i 

這個do...while循環將至少重復一次，并且一直重復直到i不再小于3，循環停止。愛掏網 - it200.com

這些是JavaScript中最基礎的知識，如果你對這方面感興趣的話，建議花點時間閱讀下面幾篇文章：

• JavaScript中的所有循環類型
• MDN：循環吧代碼
• MDN：循環與迭代
• For, While, and Do...While Loops in JavaScript
• The Complete Guide To Loops

其他迭代和遍歷的方法

而我們在處理數據（根據數據渲染列表）一般都是對數組或對象這樣的JSON數據做遍歷處理。愛掏網 - it200.com比如我們要渲染下圖中“你可能會喜歡”的列表區塊：

服務端可能提供的