React中列表渲染

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在上一节中,我们学习了如何在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上。所以,xn的变化是:

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

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

for语句

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

  • 如果有初始化表达式initialExpression,它将被执行。这个表达式通常会初始化一个或多个循环计数器,但语法上是允许一个任意复杂度的表达式的。这个表达式可以声明变量
  • 计算condition表达式的值。如果condition的值是true,循环中的语句会被执行。如果condition的值是falsefor循环终止。如果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中最基础的知识,如果你对这方面感兴趣的话,建议花点时间阅读下面几篇文章:

其他迭代和遍历的方法

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

服务端可能提供的

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/react/rendering-a-list-with-react.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部