在上一节中，我们学习了如何在React中实现条件渲染。今天我们一起来学习如何在React中实现列表渲染（在Vue中我们可以使用v-for指令）。因为在实际开发中我们时常要处理一些列表的渲染，比如在《列表渲染和Vue的v-for指令》一文中示例：

上图中我们有多个列表的渲染，比如Tweets列表，关注用户列表等。

在React中，处理列表渲染和处理条件渲染类似，需要借助JavaScript的一些原生能力来辅助我们实现列表渲染。如果你对这方面知识感兴趣的话，欢迎继续往下阅读。

回顾JavaScript中的循环

在开始学习React列表渲染之前，我们很有必要先简单的回顾JavaScript中有关于循环相关的知识。原因很简单：

React中的列表渲染用的就是JavaScript原生的循环知识。

简单地说，循环就是重复做一件事件。在MDN中有一张图形象的阐述了这个概念：

上图是位农夫为他的家庭准备一周的食物计划。为了完成这个计划，他或许需要执行一个循环。一个循环通常会需要一些特定的条件：

• 一个开始条件：这是循环的起点（比如上图中的“没有食材了”）。用到代码中，它被初始化为一个特定的值（常称初始条件）
• 一个结束条件：这是循环的结束点（比如上图中的“有足够的食材吗？”）。用到代码中，它就是循环的停止标准（常称结束条件），通常计数器达到一定的值（假设，该农夫整个家庭一周有十种食物就可以满足）
• 一个迭代器：这通常在每个连续循环上递增（或递减）一个计数器，直到达到结束条件。比如，农夫能够每小时收集到两份食物，每小时后，他收集的食物增量就增加了两倍，他检查他是否有足够的食物。如果达到了十份食物（退出条件），该农夫就可以停止收集食物

如果我们用伪代码来描述上图中农夫准备食物这样的场景，可能会像下面这样：

loop(food=0; foodNeeded=10){
    // 农夫目前的食物为0 ~> 初始条件 food=0
    // 农夫一周需要的食物定量是10 ~> 结束条件 fooNeeded=10

    // 如果农夫当前食物和所需食物数量相等 ~> food = foodNeeded
    if (food = foodNeeded) {
        exit loop; // ~> 退出循环
        // 农夫有足够的食物了，停止收集食物
    } else {
        food +=2; // 每一个小时，农夫可以收集到两件食物 ~> 循环迭代计数器 （递增或递减）
        // 循环将继续执行
    }
}

如果我们用JavaScript来实现上述这样的场景，就可以使用循环语句来处理。关键是JavaScript中循环有很多种类型，但它们的本质是做同样的一件事情：

把一个动作重复了很多次（也有可能重复的次数是0）。

JavaScript中各种循环机制提供了不同的方法去确定循环的开始和结束。不同情况下，某一种类型的循环会比其他的循环用起来更简单。

在JavaScript中，最基础的、最原始的循环语句是for语句、do...while语句和while语句。如果用图来描述的话，大致如下：

while语句

while语句只要指定条件求值为真（true）就会一直执行它的语句块。比如下面这样的示例：

var n = 0;
var x = 0;
while (n < 3) {
    n++;
    x += n;
    console.log(x)
}

在每次循环里，n会增加1，并被加到x上。所以，x和n的变化是：

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

在三次完成后，条件n<3的结果不再为真，所以循环终止了。

for语句

for循环会一直重复执行，直到指定的循环条件为false。当一个for循环执行的时候，会发生以下过程：

• 如果有初始化表达式initialExpression，它将被执行。这个表达式通常会初始化一个或多个循环计数器，但语法上是允许一个任意复杂度的表达式的。这个表达式可以声明变量
• 计算condition表达式的值。如果condition的值是true，循环中的语句会被执行。如果condition的值是false，for循环终止。如果condition表达式整个都被省略掉了，condition的值会被认为是true
• 循环中的statement被执行。如果需要执行多条语句，可以使用块({...})来包裹这些语句
• 如果有更新表达式incrementExpression，执行更新表达式
• 回到第2步，重新执行

比如下面这样的小示例：

for (i = 0, len = 3; i < len; i++) {
    console.log(i)
}

整个for循环执行过程是这样：

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

当i<len（即可i<3）时，条件不再为真，循环会终止。

do...while语句

do...while语句一直重复直到指定的条件求值得到假值（false）。代码声明块（statement）在检查条件之前会执行一次（至少会执行一次）。要执行多条件语句（语句块），要使用块语句（{...}）包裹起来。如果条件（condition）为值（true），statement将再次执行。在每个执行的结束会进行条件的检查。当condition为假（false），执行会停止并且把控制权交回给do...while后面的语句。

比如下面的小示例：

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

这个do...while循环将至少重复一次，并且一直重复直到i不再小于3，循环停止。

这些是JavaScript中最基础的知识，如果你对这方面感兴趣的话，建议花点时间阅读下面几篇文章：

• JavaScript中的所有循环类型
• MDN：循环吧代码
• MDN：循环与迭代
• For, While, and Do...While Loops in JavaScript
• The Complete Guide To Loops

其他迭代和遍历的方法

而我们在处理数据（根据数据渲染列表）一般都是对数组或对象这样的JSON数据做遍历处理。比如我们要渲染下图中“你可能会喜欢”的列表区块：

服务端可能提供的