React中列表渲染
React中列表渲染
在上一节中，我们学习了如何在React中实现条件渲染。今天我们一起来学习如何在React中实现列表渲染（在Vue中我们可以使用v-for指令）。因为在实际开发中我们时常要处理一些列表的渲染，比如在《列表渲染和Vue的v-for指令》一文中示例：
上图中我们有多个列表的渲染，比如Tweets列表，关注用户列表等。
在React中，处理列表渲染和处理条件渲染类似，需要借助JavaScript的一些原生能力来辅助我们实现列表渲染。如果你对这方面知识感兴趣的话，欢迎继续往下阅读。
回顾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中循环有很多种类型，但它们的本质是做同样的一件事情：
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数据做遍历处理。比如我们要渲染下图中“你可能会喜欢”的列表区块：
服务端可能提供的