00:00
好的各位,准备性工作呢,我们做好了,那接下来呢,开始正式的聊聊react面向组件编程,那么第一步你必须得会定义组件或者说创建组件才行,没有组件和谈面向组件编程嘛,对吗?来吧,我们往下看,React官方呢给我们提供了两种定义组件的方式,第一种叫函数式组件,第二种叫做类式组件,顾名思义,用函数定义出来的一个组件,我们就可以称之为函数式组件,那么用类定义的组件呢,我们可以称之为类式组件,我们呢,先学第一个,因为它简单容易上手啊,不至于让大家压力那么大。OK,回到代码当中吧,文件夹05REACT中定义组件还有这个文件一函数式组件我已经给大家提前准备好了,好了,开始正式的编码,走之前,我们的第一步永远是。
01:00
创建虚拟盗对吗?这回换了叫创建什么呢?A,创建组件,那么加个修饰词呗,函数式组件不是别的,好同学写个函数大家总会吧?那你看嘛,这不就是一函数吗?OK,老师,我写完了。那你这么写吧,有点小小的不合理,我引导大家一下啊同学,当然呢,我们可以一次性写出一个最标准的,然后说你就记吧。同学,把它记住了,你就是最棒的,你不行,咱得理解着来,对吧?同学,函数是组件,我不知道怎么玩,但是我会写函数,我就写了一个函数DEMO,函数不接受任何参数,里边没有任何业务逻辑,我也没有写返回值,对吗?那你这么写就有点儿不太合理,为啥呢?同学,你就品组件的定义是什么?包含页面局部功能,全部代码和资源的集合叫组件对吗?老师有点忘了,来看一下课件,之前写过,在这儿呢,往上走组件对吧?啊,代码和资源的集合,哎,叫组件,那也就是说同学,一个组件里边啊,或许会包含着结构、样式、交互,以及哎,咱说的那些音视频呐,字体啊,一些图标啊等等这些对吗?那同学你说如果有这么一个组件,它没有结构,没有样式,没有交互,没有任何其他的资源,它有意义吗?
02:28
没有,同学你说最低最低的要求,你的组件是不是也有点儿结构在里边呀?说老师那我没有结构,我只有样式,同学没有壳子,那就穿衣服呀,对吧,你没有结构怎么上样式呢?啊,那所以说同学一个最低的标准,你的组件是不是应该也得有点结构啊,啊OK,朱老师,那对,得有点结构,那怎么有点结构呢?这个函数呢,必须有返回值,哎,那返回什么呢?其实你可以返回很多复杂的结构,但是我们现在正在练习,所以说返回一个非常基础的结构。老师,那结构长什么样呢?哎,就一句话往下看,就这句话,哎,我是用函数定义的组件,那括号里边写了点东西,适用于简单组件的定义,大家现在呢,先别诶顺着这就想下去了。诶老师,简单组件,什么样的组件是简单的呀?先别在这儿绕圈子,先把这句话呈现出来,咱再说啊,那是一个H标签是吧,H1H2呢,那就随你的便了,我就写个H2吧,因为这字。
03:36
比较长啊,我是用函数定义的组件来敲,我是用函数定义的组件来个括号是吧?括号里边说什么呢?适用于简单组件的定义,适用于哎,加上这个简单组件的什么呢?定义,OK,写完了吧,哎,同学你看这就哎稍微合理一点了吗?但是你说它对吗?我告诉你它依然不对,你只是说有点合理了啊OK说老师,那接下来如果说我再告诉你,我说同学这得这样,这得那样,就有点很机械化的让你记,所以说我们尝试着把这个组件往页面上放上,那么一放,那么第二步那就是走,这回可不叫做渲染虚拟do到页面了啊,渲染组件到页面你说对不对,之前是虚拟盗嘛,现在是组件吗?那怎么写来着?React do.re DR render对吗?同学之前一直都是v do,那这回按照逻辑来说,是不是得是这个DEMO来呀?
04:36
Did往哪放啊,往T里面放好了,右键呢,我们去看一下啊,来打开吧,这啊右键我们看一下来吧,首先啊,页面里没东西,那赶紧瞄一眼控制台,看看是不是报错了,稍微放大一点来吧,同学,呃,我先不刷新啊,咱一个一个来,同学这个东西咱说是怎么回事儿来着,是不是网站那个偏爱图标它找不见呀?同学,这个东西很烦对吗?而且咱们已经开始讲组建了,东西可能逐渐的要复杂了,我不想让控制台任何无关的东西干扰大家,所以说接下来我要把这个警告给他干掉。
05:18
同学说一下为什么会有这个错误呢?浏览器一上来默认就发一个请求,就找你当前所在的这个主机名和端口,就去要你网站的偏爱图标,也就是咱之前聊过的页签上的这东西,那你还没有给他说老师,那我怎么就没给他呢?那你看一下吧,就你这么多的代码里边,你在哪配图标了啊?兄弟,你配图标了吗?没有那怎么办呀?那就给他一个呗,但是你要注意,这个图标的名字是固定的,叫做fair icon。哎,所以说你必须得给他这种东西才行,那我提前呢,给大家准备好了一个最小化。课件也要最小化,在哪呢?在这里诶,Feel icon,那摁住它,然后放到你的Vs code里边,同学不要放在12345任何一个文件夹当中,你就放在最外侧这个根目录下,诶是咱们,哎上硅谷的一个小图标,那这个时候你回到这儿再进行刷新的时候,你就会发现啊,强制刷一下,有的时候可能有些缓存啊,怎么强制刷呢?按住你键盘上的shift键,点击这个刷新就是强制刷新,OK,同学上硅谷的小logo是吧,出来了,那所以说以后这个警告就没了啊,他不干扰你了,说老师那这个同学这儿咱真无能为力,现在那你用的就是不标准,所以说这个警告他只能先在这儿啊,再过几个课时,这个东西就跟你说再见了。好了,来同学说说这儿吧,咱刚才定义了一个函数式组件,我也确实写了,我要渲染对吧,但是他报错了读,希望你遇到每个错误都。
06:59
先仔细的读一遍来走,他说什么呢?就读这就够了,函数类型是不能够作为react的节点的,那为什么呀,人家的规定啊,人家就说了嘛,这这个东西它就不能作为react节点去展示,说老师那你看啊,你告诉我用函数去定义一个组件。
07:22
啊,然后我渲染这个组件,他又不让,那这到底想干嘛呀?同学说一下,是你用的方式不标准,你这儿不能直接写DEMO,你直接写DEMO,那不就是这个函数的名字吗?那可不真把这函数往页面上放吗?那不行,那得怎么写呢?同学你注意了,我们要写DEMO标签诶。要写DEMO标签这样的话,哎,他才发现啊,我得渲染组件了,说老师那这回看看吧,嗯,来继续报错,他报什么错呀,读他怎么说,他说你这个标签DEMO是一个不被允许的,在浏览器中,诶没记错的话,这个错误咱之前是不是遇见过同学,为什么呀?找找咱们GS叉的语法规则吧,往这儿看,你刚才写的标签对吗?什么标签啊,DEMO标签首字母是小写的不是,那么它就直接转成HTML同名元素了,而且你的HTML当中还没有DEMO这个元素,所以往后看,则咱说的报错了吗?嗯,那大家应该知道怎么办了,你既然写的是组件,那您首字母就得怎么办,大写,哎,也就是说这个D呀,要大写,那你这儿都大写了,是不是得跟他进行一次匹配呀,得。
08:47
匹配上啊,那所以说这也得是DEMO啊,那这都是相辅相成的,OK,这个时候我们再回头来看,哎,同学仔细观察界面是不是出东西了,而且控制台是不是也没有警告啊,OK啊,那我们整体捋顺一下吧,同学以后再用函数去定义组件的时候,一上来想都不用想首字母是不是必须大写,然后这个里边不要直接写DEMO,要写DEMO标签,而且注意刚才我非常自然的就给他来了一个结束。
09:20
为什么呀?因为GS叉有规定标签必须闭合,如果你不喜欢自闭合,你当然也可以这样写,不嫌麻烦写一个它的闭合标签,那一般来说我们写组件的可能直接在这,诶就来一个字节数就可以了,嗯,这就是函数式组件。诶,那大家别急,你看一下我们的课件里边,这里边给你展示了一个这个。叫my component什么意思呢?那是因为课件里边写的那个组件的名字叫做my component,而你的名字叫做DEMO,哎,那我们改个名字吧,叫做my component啊,那这呢也得改一下好,My component,那其实不影响页面的呈现,只不过你这个组件换了一个名字,对吗?哎,如果啊,现在你问我my component是什么,要是在之前我可能就直接告诉大家它是函数,但现在我们在学习react,这是用函数定义的一个组件,所以说我应该告诉你同学,My component是一个组件,OK,好,说老师,那课件上怎么能呈现出组件的名字,这是怎么办到的呢?老师,我试试啊,右键检查不对呀,我这展示的怎么是HTML的结构呢,没有体现出组件呢?
10:41
那是因为你看错地方了,不应该用这个选项卡,我们应该来到刚才安装的react开发者工具里的谁呢?Components OK,点开它,那这个时候你发没发现页面上就出现了my component这个组件呀,鼠标一放,诶这边呢,还给你一个标识,说兄弟,这个组件就是对应这块区域,OK,说老师,那剩下的这些是什么呢?简单说一下啊,蓝色框里的东西呢,是react组件身上的一个属性,一会儿我们会讲到,然后这个是什么意思呀,就是你当前这个页面是由哪个版本的react渲染的,那它告诉你了是哪个版本呢?十六点八点四,哎,那我们所选用的这个依赖包呢,你打开找到GS下的,找到react do母,那你瞧嘛,是不是十六点八点四,OK,哎,那这就是函数式组件,但这里边有几个细节上的问题,我们聊一聊。
11:41
好啊同学,首先问你第一个问题,它是函数,不从本质上来说是,那我想问一下是你调用的吗?一定想好这问题啊,是你调用的吗?不是说老师什么叫我调用的,如果你写了这种代码,OK啊,这叫你调用的,同学,你亲自写的函数名加的小括号,你干嘛呢?是不在调用函数啊,但是你写这段代码了吗?没写。
12:10
那你说这个函数有没有被调用呢?一定有被调用,你不调用这个东西是怎么出来的呢?对吧?那问题是谁调的呢?诶,React帮你调的,你只需要在这里边定义好组件,在这个位置写好组件标签,由react去帮你,诶调这函数,调完了这个函数之后就得到了返回值,就呈现在页面上了,OK,那我们再深入的聊一下,这个函数里的this是谁?同学啊,咱学过,如果说你定义了一个函数叫做DEMO,你要是直接DEMO小括号在浏览器上,哎,运行这段代码,那么this是谁?是不是window对吧?哎,全局的那个window说老师,那我觉得这应该也是window,那我们一起来看一下吧。
13:01
来到控制台,This是a andde find,为什么呀?同学,那这儿呢,我就直接跟大家说一下,你红色框里的代码是不是得经过baible的翻译对吧?同学白ible在翻译完如下这些代码之后呢,它开启了一个东西叫严格模式,不知道大家还记不记得了,ES5里边是不是有个严格模式啊同学,严格模式一个最大的特点就是禁止这种自定义的函数里的this指向window,那所以说它不让你指,那这就变成了unde find OK,有些同学说了,老师是那么回事吗?啊,是Bible翻译完了之后开启严格模式导致的吗?当然是,我们验证一下,把这段东西带走,我们接下来打开Bible的官网。在这里,这里边有一个试一试,我们点击把你要写的代码放在这儿,那你注意看右边同学严格模式是不是开启了。
14:08
啊,而且你再注意观察同学,我这个里边是不是用GS叉的语法直接写的一个虚拟倒母,你观察一下右侧,同学,你看react.create element标签名HR没有标签属性,人家用了一个no,其实你用一个空对象在这里边,哎,也是可以的,那再往后是不是就是标签体内容了?同学,你觉不觉得在这儿也强有力的证明了咱之前说的那句话,你所写的GS叉其实就是原始GS的一个语法糖,你怎么舒服你怎么写,人家一定会帮你把这种形式翻译成react.create element,对吗?那有同学问老师,那这为什么是一堆这些东西啊?那说一下,为了一个更好的兼容性啊,他把你的中文呢,换了一种编码形式,诶,就变成这种了啊,也不能称之为乱码,这不是乱码,这只是把中文换了一种编码形式而已。那你看同学,Use strict严格模式是不是开启了?那么this的指向当然不能是window了啊,那不是window,那是谁呢?那就是and find了,没了呀,对吧?OK,好,哎,这里呢,就说明白这个问题了,那这儿呢,写一个注释,叫做此处的this是unde find,因为Bible编译后开启了严格模式。OK,好了,最后说一个细节上的问题,就是我写了这些红色框里的代码,React到底是怎么工作的?给你补在最下方。好了,我们开始写一写,呃,执行了啊。
15:50
执行了什么呢?React do.render这些东西之后后边我就不写了,我就点点点了,哎,之后之后发生了什么?来吧,其实发生了这么两件事,1REACT会解析你的组件标签,哎,React解析组件标签,然后找到了谁呢?My component组件对吧?这个过程如果他找不见,一定就会报错,那么第二步说一下吧,你说它接下来干嘛呀?发现组件是使用函数定义的,那么然后呢,随后调用该函数,诶将返回的虚拟盗墓怎么办?转为真实盗墓,那随后呢?
16:50
怎么办?呈现,诶呈啊呈现在哪呢?页面中好同学他就做了这么两件事儿啊,捋顺捋顺对吧,你就定义函数了,你没干别的,然后你写了一个组件标签对吧,然后就触发了react,去找到这个人帮你调用,拿到返回值,转为真实道目呈现在页面,OK,那最后总结一小下这个例子里边需要注意的是一首字母必须大写。
17:24
函数必须有返回值,这里边必须要写组件标签,别直接写组件的名字,好,这一小节我们停一下。
我来说两句