00:00
了解了GS差啊基本的这个语法规则之后,我们来做一个小练习啊,做什么小练习呢?哎,就是这个一个突出list一个练习,诶我们先把这个哎文件提前给创建好了,那里面引入了我们的核心库。首先第一步创建虚拟盗墓,好,第二步。渲染虚拟盗墓到页面看一下我们这个虚拟盗墓的一个结构,首先有一个标题对吧,然后有一个ul。被盗了。一个啊标题,那我们要先写一个最外层的一个包裹的一个元素啊,To list。
01:02
然后接下来写一个ul,里面写我们的Li啊。睡觉啊,写代码好,接下来呢,把这个虚拟到我们渲染到页面的啊,这个容器里面。使用rect到我的render方法。我们在浏览器中刷新去看一下啊。哎,我们这个案例就写完了。诶,这个结构都是对的啊,那我们来考虑一个问题,我们写哎项目,那这些数据不可能是写死的,哎,我们数据一般是从这个呃,API里面去获取啊,但是我们现在没有API,所以我们我们去模拟一些数据啊。
02:04
模拟啊数据,接下来看一下这个数据的一个结构,它呢是一个一个的这个啊数据项,也就是说一个一个的这个。哎,只有一个这样很简单的一个文字的一个数据项,那我们用什么数据来描述比较简单呢?哎,使用这个数组。贝塔,哎,等于数组,我们只用数组来描述这个数据比较简单,吃饭。睡觉写代码好,那接下来我们怎么把它给。放到这里面呢,好,那我们直接写一下这个变量看一看啊可以看。哎,可以看到,哎,它是帮我们给显示出来了,但是丢失了什么。丢失了这个Li的这个结构。那你可能说了啊,那为什么不在模拟数据的时候直接把这个L写上呢?我们来看一下啊。
03:07
Date啊,等于。吃饭啊。好,这里不要加单引号,你加单引号它就不是这个GS差的这个语法了。到浏览器中我们来刷新看一下,哎,可以看到,诶,这个结构有了,对不对,但是我们来想一个问题啊,这个数据我们一般是从API里面去获取的,谁家API给你返回这样的数据,没有的吧,没有这样的吧,对不对啊,所以这个结构应该是我们在去。呃,迭代去便利这个数据的时候,自己给加上的,那我们从API里面获取到的数据一般是这样的一个数据。再来想一个问题,哎,如果我们的数据不是数组,是一个对象,会怎么样?来来。啊,BG等于这个ITEM1啊。
04:03
然后item。二。IT3啊,如果是一个对象,我们直接放到这里面来看一下啊。刷新。可以看到没有那个任何内容看这里啊,报错了,哎,他告诉我们啊,这个对象啊,它不是一个这个react的一个一个节点,哎,它呢,只是帮我们找到了这些键,哎。然后还告诉我们,如果我们想要去渲染一个集合啊,就是说可以使用这个数组进行一个替代,所以我们这里使用对象也是不合适的。啊。那这里我们就删掉啊。接着看我们刚才这个问题。哎,我们想要让我们的这个数据,哎,正常的给遍历出来,并且有这个Li,哎,那这里我们干什么,是不是要写这个便利,好,那我们来写,哎,我们比较熟悉的啊,For。
05:05
啊,Let I等于这个。零啊,I小于date点。嗯,可以看到啊,我在写这个的时候,刚写完这个符号,它已经这个标红了啊,这个语法已经有问题了,所以我后面我不管再怎么写它都是有问题的啊。啊。那比如我这里啊,随便先。什么都不写吧,我们就看一看它会不会报错,对不对,可以看到已经报错了,是不是这里不能写这个否啊。嗯,也就是说我们这里啊,能写这个啊,速度哎,但是不能写这个。For语句。那接下来我再写一个什么呢?写一个cons,咱们看看能不能正常的输出,可以看到它不标红对吧,不标红说明有戏啊。来刷新一下,可以看到这里是不是输出了这个一。
06:02
哎,说明我们可以写canole look,嗯,那我接着写什么呢?我再写一个判断,诶IF1等等一啊这个是成立的啊,可以看到啊,一旦我写这个衣的时候,它是六标红,是不能去写这个衣,哎,刷新肯定会报错啊。是不是样吗?那我们怎么怎么总结,你怎么总结,可以写cons,不能写if,是不是可以写date,不能写if,不能写这个for是这样吗?那没有这么总结的啊。总结这个规律之前,我们先来搞清楚两个概念啊,什么是表达是什么是语句,哎,之前我们在说GS叉语法规则的时候,哎,这里提到的是说在混入GS表达式的时候,用这个划括号对不对?这里特别强调的是表达式,哎,所以说我们这个划括号里面是可以写GS表达式的,但不能写GS的语句,那我们来开始总结。在这里啊。
07:00
哎,一定要注意区分。哎,区分什么呢?区分这个GS的语句啊,GS的语句也叫什么这个代码,我们的这个普通的这个代码。啊和什么呢?和这个GS啊表达式。首先啊,来看啊,什么是表达式啊。表达式呢,就是说一个表达式会产生一个值,哎,这个值我们可以拿变量去接收啊,可以放在。任何一个。需要值的地方,我们relax这个画号里面,它就是需要什么需要值,所以这里面我们放GS的表达式是没有问题的,对不对?哎,我们表达式定义就是说它会产生一个值,哎,可以放在我们需要值的这个地方来接着看啊。
08:05
下面这些都是表达式。哎,比如呃,一个变量,哎,比如我们这个一个变量A是一个表达式吧。啊,那我们比如我们在这里定义一个变量啊,Let a等于一,你看我们这里如果使用这个A这个变量,是不是可以得到一这个值。是不是会产生一个值,那我们如果这里面选用A也会得到这个值,对吧?所以这个变量,哎是我们这个表达式,那接下来看,那如果是这个变量之间的这个运算呢,比如说A加B。是不是也是一个表达式,它会被产生值,假如我们的A是一,B是二,A加B是不是等于三,是不是也会产生一值啊,这个也是一个表达式啊,嗯,接着我们再来看还有什么是表达式,比如我们调用一个函数,哎,这个函数给我们返回的有一个一个结果,哎,我们可以用变量去接受这个结果是吧?所以我们在调用一个函数也是一个。
09:03
表达式啊,这些其实都是,哎,我们GS一些基础来接着看啊,还有什么是表达式,哎,我们这个处理这个数组的。哎,这个函数,哎,除以数轴这个函数它是不是一个表达式。它可以加工速度来返回一个加工后的一个速度,所以它是有返回值的啊。那我们来写一个例子,看一下啊,新建一个文件。这里写一个script。定义一个数组啊,等于一三。579好,接下来我使用啊数组的这个map方法来加工这个数组,它里面是一个B包。诶,然后他有一个。参数啊,这个参数呢,就是呃,它迭代的每一个元素项啊。
10:02
啊,我们用A来表示吧。最后啊,Return我们处理的一个啊规则,那我们让每个item去加一。嗯,它有一个返回值,就是返回这个处理后的啊这个数组。Light。Result等于哎,我们处理后的这个数组,我们来打一下这个result看一下啊。啊,运行一下。哎,在这个控制台里面去看。啊,这个写错了啊,这个变量。哎,可以看到,哎,是不是得到了二十六八十,得到这个处理后的这个新数组。所以说它是有这个返回值的,那我们。那这里,嗯,它也是一个表达式。是不是好,接着再来看。还有什么呢?哎,我们如果直接写函数会怎么样呢?哎,直接写函数。
11:01
啊,比如说A这个函数可以吗?哎,我告诉你大家也是可以啊,函数它也是不返回值,那它反回什么呢?我们在这里来继续啊。在我们这个例子里面来写好这个先放这。那我们来定义一个函数啊,X等于三个线。接着呢,我里面啊,什么都不写啊,直接去。打印这个X,我看看这个X,它的这个结果就知道了啊。哎,你看。这里是不是一个函数,哎,我们直接打印这个X。刷新来是不是,哎,这个就是它的这个返回值。清楚吧,所以我们直接写函数也是可以的,它也是一个表达式。那这个我们就删掉不用了啊。啊,所以说哎,我们这些都是表达式。那接下来看一下啊,什么是语句啊。也就是这个代码。
12:00
那。语句啊代码。就像刚才我们之前在这里面去写的这个啊for啊,写的这个if,他都不让我们写是不是,哎,我们写的这些其实都是啊语句,我们的这个用来控制。我们的循环呀,或者判断控制我们的这个代码流程的一些语句啊。哎,比如我们写的这个for是不是,哎,这是一个语句,你拿一个变量,你去接触它的返回值有吗?你能接收到吗?接收不到吧?哎,比如我们的这个if,你去接收它的返回值,你也接收不到吧。是不是,所以这些都是语句啊,不是表达式,哎,包括还有这个思维写。是不是一样的。哎,这些啊都是语句,哎,所以艾这个GS叉里面啊,这个大括号里面能写什么,能写这个GS的表达式啊。好,那接下来回过头来看我们这个例子,我们如果直接把这个数组放到这里面。
13:06
看一下啊。这里啊,它是不是直接给我们把这个数组里面的元素给我们解释出来,对不对,但是这个结构不是我们想要的,我们想要让每一个元素外面去套上这个Li的标签,哎,这时候可以使用什么,是不是可以使用我们这个数组处理的这个。方法啊,这个麦方法。来点卖了。哎,写上我们这个函数。那它有一个参数是每迭代的每一个项,那我们让每一个项,哎,包裹上这个Li啊Li好把它写上,但这么写行吗?大家看一看。好,我们来看一下啊。是不是成功的迭代了啊,包裹了这个Li,但是但是什么呢,都是输出的it对不对。哎,那你这么写,这这是字符串啊,我们想要用的是什么?用的是变量在GS叉里面,我们用变量是不是要用这个大括号给包裹起来,哎,所以这里也要加一个大括号,哎,放上这个item就可以去使用到这个变量,接下来我们再来看一下啊。
14:11
是不是结果出来了?但是啊。这里出现一个报错,他说你每一个节点啊,应该有一个唯一的一个K。这是什么问题呢?哎,回想一下,我们之前在讲这个虚拟盗墓的时候,是不是说过它有一个哎优秀的啊抵性算法可以,哎,知道我们这个虚拟盗墓它有没有发生改变,对吧?那所以说每一个虚拟盗墓它都应该有一个唯一的编号,也就是我们的每一个Li都应该有一个唯一的编号,这样。哎,这个react在计算这个虚拟do的时候啊,它可以就是说根据我们这个编号看看哎,哪个虚拟do需要更新,哪个虚拟do不用更新是吧?所以每一个L元素我们应该给上一个啊,这样唯一的一个K,那这个K我们怎么给呢?只要在这里啊,给它一个K属性就可以,那这个K你是随便写的吗?比如说我们写个一行吗?我们再来看一下啊。
15:03
哎,如果写了一之后,他就犯了一个错误,他说哎,至少有,呃两个啊,节点都拥有了相同的这个K1是不是,他说这个K啊,应该是唯一的。啊,那说明我们这么写不行,那怎么写呢?啊,你写什么,写时间说写其他的,你在自己写一个这个算法去算,这可是比较麻烦,那我们这个迭代的时候啊,它是不是会有一个第二个参数是一个引单子,就是我们当前迭代的这个元素的一个索引,哎,我们100个元素它是不是从零到99啊,所以我们直接用这个啊就可以了,那接下来。我们应该用变量啊,用变量的话用花括号外面不要加引号啊,来接下来再看一下。是不是就不报错了?对吧,好。那这样虽然解决了我们这个K的问题,但是这里我再就是说多说一点,哎,这里我们先使用这个index,先这么去写,哎,但是它会出现一些问题啊,当然这个我们在后期再去讨论,就是说什么情况下能用这个啊,Index能用这个索引去做它这个VK什么情况下不能,这个是作为我们后面的学习,我们再另说啊,现在我们先解决这个问题,哎,我们知道在我们去。
16:09
啊,就是说循环这个节点的时候,我们需要啊,给它加一个V的一个K。就可以了。最后啊,稍微来总结一下啊,一定要区分好这个表达式和这个语句,哎,我们GX差这个大括号里面我们能写的是GS的表达式,而不是啊一些这个语句啊,这点一定要清楚。然后就是我们在这个GS差里面,如果要用到一些变量的话,一定要用这个大括号给括起来,哎,清楚了,不然你。就是一个字符串啊,你用的不是这个变量啊,还有一点就是哎,我们如果在进行这个呃,元素迭代的时候哈,就是说变力的时候,一定要给他一个唯一的一个K。才可以啊,这是需要注意的几点。
我来说两句