在上一節(jié)中，我們學習了如何在React中實現(xiàn)條件渲染。愛掏網(wǎng) - it200.com今天我們一起來學習如何在React中實現(xiàn)列表渲染（在Vue中我們可以使用v-for指令）。愛掏網(wǎng) - it200.com因為在實際開發(fā)中我們時常要處理一些列表的渲染，比如在《列表渲染和Vue的v-for指令》一文中示例：
上圖中我們有多個列表的渲染，比如Tweets列表，關(guān)注用戶列表等。愛掏網(wǎng) - it200.com
在React中，處理列表渲染和處理條件渲染類似，需要借助JavaScript的一些原生能力來輔助我們實現(xiàn)列表渲染。愛掏網(wǎng) - it200.com如果你對這方面知識感興趣的話，歡迎繼續(xù)往下閱讀。愛掏網(wǎng) - it200.com
在開始學習React列表渲染之前，我們很有必要先簡單的回顧JavaScript中有關(guān)于循環(huán)相關(guān)的知識。愛掏網(wǎng) - it200.com原因很簡單：
簡單地說，循環(huán)就是重復做一件事件。愛掏網(wǎng) - it200.com在MDN中有一張圖形象的闡述了這個概念：
上圖是位農(nóng)夫為他的家庭準備一周的食物計劃。愛掏網(wǎng) - it200.com為了完成這個計劃，他或許需要執(zhí)行一個循環(huán)。愛掏網(wǎng) - it200.com一個循環(huán)通常會需要一些特定的條件：
- 一個開始條件：這是循環(huán)的起點（比如上圖中的“沒有食材了”）。愛掏網(wǎng) - it200.com用到代碼中，它被初始化為一個特定的值（常稱初始條件）
- 一個結(jié)束條件：這是循環(huán)的結(jié)束點（比如上圖中的“有足夠的食材嗎？”）。愛掏網(wǎng) - it200.com用到代碼中，它就是循環(huán)的停止標準（常稱結(jié)束條件），通常計數(shù)器達到一定的值（假設(shè)，該農(nóng)夫整個家庭一周有十種食物就可以滿足）
- 一個迭代器：這通常在每個連續(xù)循環(huán)上遞增（或遞減）一個計數(shù)器，直到達到結(jié)束條件。愛掏網(wǎng) - it200.com比如，農(nóng)夫能夠每小時收集到兩份食物，每小時后，他收集的食物增量就增加了兩倍，他檢查他是否有足夠的食物。愛掏網(wǎng) - it200.com如果達到了十份食物（退出條件），該農(nóng)夫就可以停止收集食物
如果我們用偽代碼來描述上圖中農(nóng)夫準備食物這樣的場景，可能會像下面這樣：
loop(food=0; foodNeeded=10){
// 農(nóng)夫目前的食物為0 ~> 初始條件 food=0
// 農(nóng)夫一周需要的食物定量是10 ~> 結(jié)束條件 fooNeeded=10
// 如果農(nóng)夫當前食物和所需食物數(shù)量相等 ~> food = foodNeeded
if (food = foodNeeded) {
exit loop; // ~> 退出循環(huán)
// 農(nóng)夫有足夠的食物了，停止收集食物
} else {
food +=2; // 每一個小時，農(nóng)夫可以收集到兩件食物 ~> 循環(huán)迭代計數(shù)器 （遞增或遞減）
// 循環(huán)將繼續(xù)執(zhí)行
}
}
如果我們用JavaScript來實現(xiàn)上述這樣的場景，就可以使用循環(huán)語句來處理。愛掏網(wǎng) - it200.com關(guān)鍵是JavaScript中循環(huán)有很多種類型，但它們的本質(zhì)是做同樣的一件事情：
JavaScript中各種循環(huán)機制提供了不同的方法去確定循環(huán)的開始和結(jié)束。愛掏網(wǎng) - it200.com不同情況下，某一種類型的循環(huán)會比其他的循環(huán)用起來更簡單。愛掏網(wǎng) - it200.com
在JavaScript中，最基礎(chǔ)的、最原始的循環(huán)語句是for語句、do...while語句和while語句。愛掏網(wǎng) - it200.com如果用圖來描述的話，大致如下：
while語句
while語句只要指定條件求值為真（true）就會一直執(zhí)行它的語句塊。愛掏網(wǎng) - it200.com比如下面這樣的示例：
var n = 0;
var x = 0;
while (n 在每次循環(huán)里，n會增加1，并被加到x上。愛掏網(wǎng) - it200.com所以，x和n的變化是：
- 第一次完成后：
n=1，x=1 - 第二次完成后：
n=2，x=3 - 第三次完成后：
n=3，x=6
在三次完成后，條件n的結(jié)果不再為真，所以循環(huán)終止了。愛掏網(wǎng) - it200.com
for語句
for循環(huán)會一直重復執(zhí)行，直到指定的循環(huán)條件為false。愛掏網(wǎng) - it200.com當一個for循環(huán)執(zhí)行的時候，會發(fā)生以下過程：
- 如果有初始化表達式
initialExpression，它將被執(zhí)行。愛掏網(wǎng) - it200.com這個表達式通常會初始化一個或多個循環(huán)計數(shù)器，但語法上是允許一個任意復雜度的表達式的。愛掏網(wǎng) - it200.com這個表達式可以聲明變量 - 計算
condition表達式的值。愛掏網(wǎng) - it200.com如果condition的值是true，循環(huán)中的語句會被執(zhí)行。愛掏網(wǎng) - it200.com如果condition的值是false，for循環(huán)終止。愛掏網(wǎng) - it200.com如果condition表達式整個都被省略掉了，condition的值會被認為是true - 循環(huán)中的
statement被執(zhí)行。愛掏網(wǎng) - it200.com如果需要執(zhí)行多條語句，可以使用塊({...})來包裹這些語句 - 如果有更新表達式
incrementExpression，執(zhí)行更新表達式 - 回到第2步，重新執(zhí)行
比如下面這樣的小示例：
for (i = 0, len = 3; i 整個for循環(huán)執(zhí)行過程是這樣：
- 第一次完成后，
i=0 - 第二次完成后，
i=1 - 第三次完成后，
i=2
當ii）時，條件不再為真，循環(huán)會終止。愛掏網(wǎng) - it200.com
do...while語句
do...while語句一直重復直到指定的條件求值得到假值（false）。愛掏網(wǎng) - it200.com代碼聲明塊（statement）在檢查條件之前會執(zhí)行一次（至少會執(zhí)行一次）。愛掏網(wǎng) - it200.com要執(zhí)行多條件語句（語句塊），要使用塊語句（{...}）包裹起來。愛掏網(wǎng) - it200.com如果條件（condition）為值（true），statement將再次執(zhí)行。愛掏網(wǎng) - it200.com在每個執(zhí)行的結(jié)束會進行條件的檢查。愛掏網(wǎng) - it200.com當condition為假（false），執(zhí)行會停止并且把控制權(quán)交回給do...while后面的語句。愛掏網(wǎng) - it200.com
比如下面的小示例：
var i = 0;
do {
i += 1;
console.log(i);
} while (i 這個do...while循環(huán)將至少重復一次，并且一直重復直到i不再小于3，循環(huán)停止。愛掏網(wǎng) - it200.com
這些是JavaScript中最基礎(chǔ)的知識，如果你對這方面感興趣的話，建議花點時間閱讀下面幾篇文章：
- JavaScript中的所有循環(huán)類型
- MDN：循環(huán)吧代碼
- MDN：循環(huán)與迭代
- For, While, and Do...While Loops in JavaScript
- The Complete Guide To Loops
其他迭代和遍歷的方法
而我們在處理數(shù)據(jù)（根據(jù)數(shù)據(jù)渲染列表）一般都是對數(shù)組或?qū)ο筮@樣的JSON數(shù)據(jù)做遍歷處理。愛掏網(wǎng) - it200.com比如我們要渲染下圖中“你可能會喜歡”的列表區(qū)塊：
服務端可能提供的