00:00
好了各位,我们继续往下扩展一个点啊,叫做hos hoks它是什么呢?我们读一下啊。Hook呢,是REACT16.8版本新增加的一个特性,或者呢,你也可以说是新语法吧,啊,它能干嘛呀?再读第二句,它可以让你在函数组件中去使用state以及react的一些其他特性,就比如说生命周期钩子呀等等这些。好函数式组件呀,可能大家是不是都忘了呀,那这样同学我们回到啊,咱们当时啊,去讲基础内容的时候的那个文件夹打开。我不全屏啊,不全屏的意思就是我现在打开的这个啊,不是说我们现在主讲的这个是回顾之前的,是不是这些折叠起来,这些折叠起来我们在这个里边说了函数式组件同学,函数式组件最大的一个问题就是什么呢?它没有自己的意思,对吧,缺失了。
01:03
所以说导致啊,函数式组件其实不能使用组件实例的这几个属性,但其实有一个是特殊的,是不是props呀,哎,咱说函数式组件其实也能用这个props是吧?嗯,好了,那函数式组件能用生命周期吗?都不能。函数式组件不能干,这不能干那本质原因就是它没有this,没有实例对象,很多东西就都玩不了了啊,所以说当时我们说函数式组件呀,只能去定义那些非常简单的组件,那啥叫简单组件呀啊,咱说其实衡量的标准呢,就是看你有没有state是不是。哎,那所以说在大家的印象当中呢,始终就觉得,哎呀,函数式组件没啥大用,自己的this都没有,实力都没有,干不了啥大事儿啊,那是16.8之前,你可以这样讲,确实呢,它有这问题,但是从REACT16.8以及以后的版本,它推出了一个东西叫做hox,就可以让你的函数式组件摇身一变也可以使用这些东西了。
02:09
啊,好了,把之前的工程呢关掉,回到我们现在所写的这个工程,新建一个文件夹吧,叫做三下划线hox,新建一个组件index.gs叉,我们必须得通过一些案例呢,把这个东西讲明白,那所以说接下来啊,各位,我还写求和,那按例在这儿来一句当前求和为在这来一按钮点我加一好开始写,我先拿类似组件写一下rcc走名字改一下,叫做DEMO。啊,首先有一个HR的说明,叫做当前呀,求和啊为啊为多少呢?得读状态z.state.count但是我还没有状态呢,那怎么办呀,初始化状态呗,State等于来count,刚开始的值是几呢?零下边还有一个按钮,对吧?But button叫做点我A点5A,呵,慢点,点我加一。
03:08
那在这再来一个on click走,那名字呢,就别写increment啥的了,ADDDD多简单呀,ADD复制语句,箭头函数里边怎么写呀?拿到原来的状态加个一放回去。那咱们是不是刚学完这个set state2种写法啊?那咱为什么不练一下呢?this.set state走传啥不传对象了?传移函数,函数能接到一个参数就是state,对吧?函数得有返回值,返回值默认是一个对象,我想简写,那就是小括号,画括号,那count的值呢?当然是从state里边取出来的state.count加一是不是就可以了呀?哎,那APP里边呢,得改一下,不能再引入二了,是不是得引入那三呢?其实这名字我问大家是不是已经无所谓了,哎,你叫什么都行,为啥说这会儿我说的快一点呢?但因为这些东西啊,同学咱不是练一遍两遍了,特别多的变数了,对吧?好,这我从来不改啊,就叫DEMO,你也不用像真正开发写的那么标准,现在咱们就说说的这个语法对吧了,关掉我拿啥写的呀,这可是累啊,好了,打开。
04:18
哎,正如你所想的是吧,哎,点加一走没问题吧,哎,控制台咱也开开啊来来到这儿加一,诶能加,接下来呢,不拿类式组件写,我拿函数式组件写。啊来来来来来啊,这是类式组件哈,我用函数式组件去写,那怎么办呀,那你就得换一换了,来同学这样我不想啊破坏掉这个类的写法,因为一会儿我还想形成一个对比,所以说这样我把那暴露啊放在最后我暴露谁呢?DEMO,但是这个DEMO我不要了,因为这是类式组件的DEMO,对不对,写好了叫做类式组件,那接下来呢。同学,咱就不用类式组件了,那咱用啥呢?咱用函数式组件,再来一波呗,走函数式组件咋写呀?Function名字呢,叫做DEMO,走里边怎么办呀?不用写render是不是直接写返回值啊,Return那一堆结构是不是可以在这儿拿过来呀?那不都是一样的吗?好了,走老师写完了组件我也暴露了呀,那去看看效果吧,走。
05:23
打开终端啊,直接打开浏览器吧,啊,输入local host3000。你发现他报错了,报的什么错误呢?不能够读取state在and find身上,那就对了,那就对了。回到代码当中,你说函数式组件呀,各位是不是连自己的this都没有?嗨,连自己的this都没有,你怎么this.state相当于你写了under find.state所以说他报错了,他说老师,那这那就只能不写了啊,来,先这么写着,写几个问号。那这呢,同学on click呢?
06:00
this.add呀,不对吧,它是不是连自己的this都没有啊,那就别写this呀,别写this呀,老师那这么写ADD没有啊,ADD没有,你就定义一个呗,函数里边难道不能再定义一个函数了吗?完全可以吧,A ddlolo你点。加号来咱试试啊,这写好一个注释叫做加的回调,哎,这回回到页面刷新一下,哎,这行控制台还好,哎这行老师这啥意思呀,说我第一行这个东西定义了,但是没有使用,那你瞧瞧呗。你这是不是确实定义了,那确实没有用嘛,老师那就删了吧,那你这删呢倒是也行,但你这一删呀,你这就得改一下对吧,诶点。好了,回到这儿刷新。点击一下那加号啊,啊,你点击加号了。
07:00
但这都是假的呀,和也读不出来呀,你这也只能做个log打印呢,对吧?那我们怎么能让函数式组件用上state呢?那非常简单,回到我们的总结里边,同学,你需要使用第一个hook。啊,就它推出了很多的东西,都叫这hook,那HOOK1堆统称叫H斯,哎,首先用第一个同学读啥意思?react.use state use state是什么意思呀?Use有使用的意思,State呢,状态,那么use state的意思就是使用状态。借助这个,就可以让函数式组件也能玩state。回到代码当中,咱写一写,同学一定要注意,你现在写的可是函数了啊,函数题里的东西是可以随意写代码的,来走着,你需要这么玩cost。A等于react点,有一个方法叫做create,诶,不是create叫做use是吧?哎,Use use什么呢?这个state好走。
08:09
老师没懂,这啥意思呢,react.use state的调用呢,能够返回一个结果。这个结果,这个A呀,我先跟你说,它是个数组,数组里边只包含两个元素,第一个元素就是你想要的那个状态,零啊,一啊二啊,那么第二个就是用于更新状态的方法,我就写个庚和方更新状态的方法。同学,你状态你不能不更新吧,那你想更新就得有更新的方法呀,是吧,所以说在这儿呢,我们一般用数组的结构赋值。Use state,那就是使用状态,那使用状态初始值是几呢?求和的初始值是几?求和的初始值是几?零吧,写零。老师那字儿呢?
09:00
其实你完全可以用A和B去表示。然后在这呢,我们也可以完全的输出一下A和B。那你去看看那个A和B到底是个什么东西?同学,这你不能不知道,这是数组的结构赋值,别一说结构赋值好像就只有对象可以,数组是不是也可以按照位数去写,是不是也行啊?好了,保存回到页面呢,刷新一下看效果,同学,你告诉我第一个是啥?就是你传入的那个零,那同学你告诉我第二个是啥呀?是一个内置的函数,这函数能干嘛呀?能更新这零。哎,就可以了,来回到这儿,同学这儿我们一般不用A,我们用啥呀,我们用一个语义化点的东西,其实理论上啊,你这叫佩奇,你这儿呢叫乔治,都没有人能管得了你,但是一般来说,我们这样做,由于你传入的零呢是代表和的,所以说给它起个名字呢,叫做count。哎,那后边这个东西是个方法用于更新count的,所以说我们一般叫做set啊count,哎,就这意思说,老师这名你随便起啊,兄弟数组的结构赋值是不是按照位数写就可以啊,哎,好嘞,那走,那这块呢,别再输出了,咱也看见了,那你说这是不是就可以去写了呀。
10:20
这咋写呀,花括号读谁count完事了呗,对吧,那这side count呢,就是改变这个零的值,所以说当你点击加号的时候,同学我就写一个set count,来我先写死,我写个99行吧,来咱试试啊,你看状态有了吧,更新状态的方法有了吧,那状态读了吧,那更新状态的方法用了吧,诶就这回事,回到页面我们刷新看一下效果是不零来点一下是不是变99。但是我的目标不是说让你把它变成99是加一个,那咋办呀,太简单了,Count加一是不是就可以了呀。
11:02
哎,你看count嘛,加一嘛,好了,回头刷新走。是不是可以完成加了呀,那这里边儿有一些细节上的问题呢,我们需要说一下啊,各位来同学你说我想问你的是这个DEMO函数调几遍,调一次我就输出一个DEMO,你回答我DEMO调用几次。咱得这么聊了,是一加N次,它就如同当年的render,你觉得呢,初次渲染各位是不是得掉一次,以后随着你对状态的更改,这个函数是不是得不断的被调用,每一次调用都能拿到一个新的返回值展示到页面,你说对吧?好,那我们看一下是不是这个样子的刷新,这是一加N那一吧,来点我加一走。再走,再走再走,随着你的点击,各位东西是不是一遍一遍的被调用啊,啊说老师那这不挺正常的吗?有一个地方稍微有点不太正常,我想问各位的是,你每一次调用DEMO函数二十五行是不是都得执行?
12:09
那么有一个事儿呢,就说不通了,二十五行,如果每一次都执行,那么你分析吧。我这是不是传了一个零啊。同学,第一次咱就分析来一刷新,第一次为啥是零呢?回到代码,因为这是零,因为这是零,所以1RENDER,诶没有render的是吧,11RETURN,那这是不是就是零啊好。这是第一次,对吗?好。你点了这个东西,点我加一是不是掉这个东西,一掉这个东西是不是set countt1set count,这确实是零加一确实是一,随后是不是导致DEMO函数重新调用,那么一重新调用,你注意,哎呀,我这是不是又是零啊,那理论上我这个count是不是得变成零啊。那理论上这时是不是还得是零,是不是变不了啊,但是事实却是,诶可以加下去对吗?那为什么呢?说一下啊各位,其实这行代码啊,React底层做了处理。
13:10
第一次调用的时候呢,其实他把这个count呀就存下来了啊,等以后你再调用DEMO函数的时候,第二十五行确实是执行了,但是不会因为它的再次执行把那个值给覆盖掉啊,这是它底层的一个处理对吧,你正常来说肯定得覆盖的,你函数一调用函数体全都重新执行对不对,二十五行也不例外是不?嗯,但是它底层它做了处理对吧,不会因为你的再次调用去把东西覆盖了。啊,第一次确实得掉啊,掉完之后呢,就缓存下来了,哎,所以说这块呢,是一个细节上的问题,好啊,那同学啊,这个set count呢,也有两种写法,这是第一种写法啊,就直接写值,要把它变成什么,其实set count呀,同学还有第二种写法,我把第一种呢注掉好,然后呢,我写第二种,大家看一下啊,也叫做set count,但是这个时候呢,有点特殊,它这里边呢,要传入一个函数,就有点像你的set state。
14:11
觉没觉得同学们set state,第一种方式直接写对象,第二种是不是写函数,那么这个set count就是第一种咋的?哎,直接写值,那第二种呢,写函数,那函数有什么规矩呢?给大家总整理好了,回到这儿看一下。来stateho,刚才我讲的就是statehoook啊,这东西让函数组件也可拥有state状态,并且可以对状态进行读和写的操作,那在这儿,嗯,语法。刚才咱是不是这么写的,哎,react.use state啊initial value,啥叫initial value啊,就是初始化的啊,你看这两种写法啊,两种写法,那么第一种直接写new value,那么第二种呢,他把之前的Y值给你,你再返回一个new value。啊,回到我们的代码里,也就是说你得写一函数,它帮你把之前的count值给你了。
15:06
你在这需要做的一个count加一就可以了。哎,人家把之前的给你,那到底加几随你的便。那么简写方式就是箭头左侧小括号不用了。箭头右侧函数体只有一句还想默认return,那就是都不写了。那这呢也不小来,就这么一个效果,来瞧一瞧,回到页面点击走,是不是也能加下去啊,诶,它也是有两种写法,哎,娜同学,我考一考你。不仅有当前求和为这,我想写一这东西叫做我的名字是,我的名字是你,比如说现在我先写死,叫艾特硅谷。啊,艾特硅谷不用写引号哈,艾特硅谷是吧。那我想这再来个按钮,叫他点我改名。啊,Change name。
16:01
我想把东西把这个名字也放在状态里,那咋办呀?那你就得这么做了,各位找react.use state来写,叫什么名好?啊,那这呢不叫count了,叫name,那这呢不叫set count了,叫set name来就在玩来吧,这at硅谷啊,来写那就变成初始值的那个Tom了,那这怎么写呀,那就内幕呗。是吧,按照这呢,那就是set内呗,啊,你就只能是这么写去来咱写一下啊来走change name复制一下,哎方式change name走,然后里边干嘛呀,你可以调这个走改一下叫做set name,那名呢,你给它换一下,比如原来叫Tom,现在叫做Jack。啊,Jack。好了,试试看能不能行啊,回到这儿啊,刷新一波,走是不是零能加吧,我的名字是不是Tom,来换名是不是Jack。
17:01
哎,那所以说同学,如果你的状态一多,那么必然的,你这肯定得这样一遍一遍的写,react.use state react.use state啊,一个一个一个一个的就都得这么来。啊,你看这就是管球盒的,这是管啥?哎,管那名字的,好,这就是我们所说的这个use state,其实就是属于hos里的第一个,叫啥呢?哎,就叫做。来回到咱们的总结里,叫做statehoook,哎,Statehoook啊,能让你用状态,而且这呢,我们的总结里边呢,也给大家写说明了参数啊,这个use state参数第一次啊,初始化指定的值,在内部会做缓存啊,返回值呢,是两个元素的数组,第一个是内部的状态,第二个是更新状态的函数或者说方法就可以了,Use state。哎,不知道大家呢,听完这儿感觉如何是吧?哎,可以发表一下你的评论,觉得这东西怎么样?说老师,那我知道了,以后我肯定不写类似组件了,我以后肯定写函数式组件,完了,那state我就用use state,我觉得这玩意儿它挺好的,哎,同学,等我讲完你再说,现在我只讲了第一个hox啊,你看着我再接着往下写呀,这小节我们先停一下啊。
我来说两句