00:00
好,各位同学,我们继续接下来呢,咱们再说一个比较常用的hawk,它的名字叫做use effect。Effect这个词直译过来呢,有影响副作用的含义,那么这个东西的推出就可以让我们在函数式组件里面去使用生命周期钩子,回到我们的代码当中,我把函数式这个组件啊先注掉,哎,我先注掉。我把类似组件呢打开。咱们写一点类的,再把它搬到函数里面,形成一个对比,好,那这个时候呢,我重新打开我的这个案例。之前的关掉啊,控制台开好,我有这么一个需求,各位就是想让这个零啊,一上来就开始自增长。不是说我点加一,它再加一,而是一上来每隔一秒钟它就能发生变化,比如说0123,那么在类式组件里边实现的非常简单,回到代码里面,大家肯定呢,也能猜得到老师一定在component data amount这个钩子里面,我开启一个定时器是吧?走,每隔一秒钟我做一件事儿,就是更新状态,那就直接写this.site state,走,那既然你的新状态是依赖于原状态的,那么就写成函数的形式吧,对吧?哎,State,然后呢,剪头,你返回的是一个对象,诶,Count,它的值呢,是state.count加一就可以了,每隔一秒钟是不是都开始自增长啊,来,咱试试啊,保存。
01:42
稍等,等着它编译。好,打开我们的页面刷新,等着每隔一秒钟都能自增长对吧?就这么一个功能,我想让你在函数式组件里边实现,那来吧,这个先关掉啊,那我把类式组件重新的注掉,因为类式组件里边呢,是可以用生命周期钩子的,对吧,把它注掉。
02:03
可能有些同学觉得呀,老师,函数里边不能用吗?那你试一试啊,来同学呢,这样我先把名字还有改名这些东西呢,我想删掉,我最终想实现的效果就是函数式组件和类式组件的功能一模一样,然后你去对比里边的代码,这个名字呢,只是刚才我举例子的时候跟大家说了一下,好吧,来删掉这个,也删掉这个呢,也删掉好了,来吧,说老师我觉得好像还能写生命周期钩子,那你写一下呗,Component amount,走同学,不可以的,函数里边能这么写东西吗?不行。啊,那你可能还会有一个感觉,老师我觉得好像就正常定义一个函数叫component,然后好像react就能帮我调吧,那你试试吧,你在这里边写一艾特符,这时候呢,你重新打开咱这案例啊,那这儿呢,他说有一个地方不太对,是因为这儿我就也得删掉是吧,好了。
03:02
等着它编译啊。那直接打开浏览器吧啊,由于这里边儿呢,它有点小问题,你看他说你定义的,但是没有使用,其实到现在呀,你就能捕获到一些信息,你这么写它多半是不行了啊,那由于啊,它出问题的时候呢,这就不展示那个网址了,那所以说我们就直接打开浏览器吧,来输入local host3000控制台开好刷新同学,你见到那个艾特服的输出了吗?没有。没有,所以说你定义这个函数是无济于事的,哎,那怎么做呀?来吧,同学就得请出这个人了,叫做react点,其中有一个叫做use啊,Use effect就是使用副作用,也就是说使用生命周期钩子,它怎么做呢?有点稍微的小复杂,首先它本身是一个函数,你要调用它。哎,你调用它的时候呀,会传入一个函数,那我先告诉你,传入的这个函数就相当于一个生命周期钩子,到底相当于哪个生命周期钩子呢?那希望你自己去观察,来cost输出艾符。
04:13
稍等,等着它编译。好了,回到页面同学你注意看啊,我刷新一下,首先DEMO先输出,那是肯定的,回到代码,因为我在第第一行是不是就哎说这DEMO了呀,那我这样先把它入掉,省得它干扰咱啊,回到页面刷新刷新,同学你说这组件一挂载啊,就输出这个东西,所以说目前你观察同学你觉得就这个react.use effect传入的这个红色的函数,你觉得它相当于哪个钩子呢?组件一挂载就输出艾符同学,是不是相当于component amount呀?啊说好了老师拿小本我记下来对吧?哎,这个东西相当于component amount不,你等我接下来再操作的时候,你看啊,接下来我点击这个按钮啊,你看着。
05:09
同学,你发现艾特符是不是依然在输出啊?我点击按钮这算什么动作呀?这是不算更新组件呀?所以说同学你能说刚才你所看到的那个红色函数相当于data amount吗?好像不是,好像也相当于date update吧。哎,那同学你觉得如果我真把定时器写在这个里边合适吗?那可就不合适了,是吧,因为表面上来看,这个钩子不仅仅在组件挂载的时候执行,那更新的时候是不是也执行了,那如果说同学啊,你真是这么写了set in包啊,然后走,每隔一秒钟你都去更新状态,那我把更新状态这段代码呢,我就复制过来,那你瞧一下吧,你看看效果来刷新。
06:04
走刚开始还行,后边一定是越走越快,越走越快的,你看是一个指数形式的增长,为什么呀,同学,这就跟咱们当年去做那个react学不会不活了那个案例是一样的,你在render里边开的定时器,那最终肯定是这效果,对吧?来快快快关了是吧。说老师那怎么办啊,你不能在这里边开啊,那也就是说你得找到那么一个钩子,它的的确确相当于component amount,你说对吧,嗯,老师,那这怎么办呀,来瞧着同学。你的use effect呀,能传两参数,目前我传几个use effect,目前我传几个,是不是一个呀,其实它能传两个参数。第二个参数,你注意看我写个空数组。哎,我先写着,一会儿再给你解释啊,Colo输出艾符。同学,我不加这第二个参数控数组,它是什么样子呢?刚才你见到了是吧?来打开控制台开好你见到了,我点击的时候,不仅挂载的时候执行data update是不是也执行啊?哎,那回到我们的案例里边,代码同学,我在这儿传入第二个参数,我写一个方括号空数组,你发现呀,它就好了。
07:22
回到页面刷新,当我点击加的时候,各位看好了啊,走值加没加呀,嗯,加了加了,但是艾特符输出了吗?没有艾特符只输出了几次呢一次。那这一次就相当于那个data amount对吗?哎,那咱们就探讨一下,为什么写了这个空数组,我这就不变了呢。回到代码当中,其实啊,同学,这个数组呢,有监测谁的意思。啊,你听我说同学,就是你不写这空数组吧,他底层做了一件事,就是你所有的状态发生改变的时候,我也会再帮你调一次这个。
08:07
哎,也就是说这个红色的函数,它掉了第一次是初始化的时候,那以后只要你更新它还会再掉那个N次,你更新几次我就掉几次是吧。那是因为啊,如果你没有传第二个参数,同学们,它就相当于监测所有人。I就相当于监测所有人。你比如说同学,我这儿什么也没写,监不监测count的改变,监测,只要countt改变了怎么着,我就帮你调这函数,哎,那同学,如果我写的是空数组是什么意思呢?就是谁也不监测,如果你连这个数组写都不写,那就是怎么着呢,全都监测。说老师,那我这么写什么意思呢,Con。同学,我是不是写了一数组啊啊什么含义啊,监测谁,那按照我现在这个写法,我监测谁呢呀,我是不是监测count的呀,那所以说同学这个艾符会在两个时刻输出,一组建挂载,二咋的,你更新了count值,你说对吧,好回到页面刷新,咱看效果,同学这是一上来的场景对吗?来你点一下走走走。
09:25
因为你的代码目前是不在监测count呀,哎,那所以呢,Count只要改变,那这个红色的函数就要被调用。啊,所以说同学你要注意一点,就是说你不写这个数组,好像觉得谁也不监测,不是不写这数组谁都监测,那么写了一个空数组什么意思呢?谁也不监测,就这么回事,来咱验证一下啊同学。我这么写什么意思呀,监测谁监测count,哎,那你说同学,如果我有一个这个东西啊,比如说写上叫做Tom,就像刚才似的那个名字啊,来site name,那我这写什么呢?Name,好各位,那你看着我这儿来一个按钮啊,叫做点我改名是吧?哎,就还是之前那个对吧,我临时写一下来,比如说叫做change就得了,就是change复制。
10:21
定义一个函数叫做change,走里边干嘛呢?我就set name去,就把你的名字改成Jack。好,注意观察啊,那这个name呢,我也用一下吧,在页面上显示一下啊,这儿呢,来一个小逗号,写上花括号啊name来咱瞧一下效果啊同学,我这么写只监测谁呀,看看一会儿就算我改变了内幕这个输出吗?不输出那就意味着这个函数是不是没执行呀?啊好,回到页面刷新啊,注意看效果,我监测谁count,所以说您countt的改变它一定会掉,但是你说监测名字了吗?没有,你点改名,你看这是不动的,但是如果说呀,你在这儿这么写的逗号,我还想监测名字,诶,那这回你来到页面看效果吧,我们刷新一下。
11:13
好,注意看啊,点我改名,你看名字的改变它也监测对不对?哎,所以说呀,同学你觉不觉得现在我红色框里的这个函数啊,其实是相当于类似组件里边的两个钩子,一个叫做date update,一个叫做data mount,那到底相当于data mount还是data update呢?我得看您第二个数组怎么传,你说对吧,那我现在就想让它相当于did mount,因为我要开定时器吗?那我问各位,这是不是写空数组啊,那里边怎么着啊,咱是不是写一个set interval来走着,每隔一秒钟我要干一件事什么呀,更新状态值,那就把它写在这儿。
12:01
哎,保存稍等编译回到页面刷新一下,看一下效果,你看非常稳定的在一点儿一点儿一点儿的增长,对吧?哎,那这个名字呢,同学我也先临时给它删掉吧,哎,这个change呢也删掉啊,那这块呢也删掉,这个展示名字这块啊也给它删掉。好同学,接下来再提需求啊,注意总结这个东西是相当于俩钩子的,到底相当于谁?我看你这儿怎么配置,嗯,来,我把函数式组件再一次的注掉。回到类似组件里边啊,我再加一个功能,各位保存。回到页面啊,看一下效果刷新,哎,是吧,这是类似组件自增长的啊,好了,有这么一个需求,就是有一个按钮,只要一点击就能把页面上的组件卸载掉,Button啊,叫做卸载啊组件。
13:05
那这还得写一个on click。等于this点卸载UN mont on mount卸载嘛,啊然后呢,放在这儿复制语句箭头函数,因为这是类组件,对不好了,同学,那卸载组件卸载吧,咋卸载react DOM点。啊,咋的,是不是on mount什么什么component at note呀,但你一定要注意,你这是不是还没引入呢?那所以说赶紧引入一下啊,Import react DOM from react DOM引入了吧,行,那这回你能卸载了,把哪个卸载呢?Did,我把根节点里所有的都给它卸载掉。啊,好了,我们瞧一下效果啊,稍等,等着它变异OK了,回到这儿啊,刷新一下啊,看着走走是不是很稳定的,一点一点在增长啊。
14:02
点击卸载组件同学,这个错误我们不是第一次遇见了,啥意思呀,组件卸载了,定时器停了吗?没有,那定时器没停,那就意味着组件的更新依然在继续,组件都没了,更新啥呀?哎,所以说同学在这儿呢,大家也都明白了,我得需要这么一个钩子,叫做component will on mount将要卸载,将要卸载的时候我做一件事就是clear interval清除这个循环定时器,那么就得要求你当年得把循环定时器的ID啊挂在实力自身,那这儿我就得写上this.timer对吗?就能把这个定时器清掉。同学,这些东西为什么我一点没有停顿的直接开始写呢?因为咱们之前都是写过的,对吧?哎,好了,保存,那回到页面刷新看一下效果。开始一步一步的增长,然后我说我要卸载组件了,走定时器是不是停掉了呀?啊,我要把这个功能搬到函数式组件里边去,那所以说做一件事终端关掉啊,把类式组件进行注释。
15:14
好了,回到函数式组件里边,把这一堆呢解开走。稍等它编译一下啊。回到这儿,刷新确实可以一步一步的增长啊,但是这儿还没写呢,对吧?那按钮来回到代码当中,咱写,那就把刚才写的复制过来吧,好吧,哎,复制放在这儿,这叫什么呀?卸载组件那不能加this了,就叫做on mount,所以说呢,你得定义一个函数,我就复制一下它走写,好处是这叫做卸载组件的回调,里边干嘛呢?那就开始卸载吧,是吧,它的名字就拿过来叫做mount,那怎么卸载呢?是吧,还是上边这一堆代码,我就直接拿过来了,复制往下走,在这个里边,React do on mount component at node,对吧?好嘞,I,卸载组件的回调,那咱试一下看看能不能卸载掉啊。回到类式组件,哎,这应该是函数式组件了是吧?哎,刷新一下好。
16:17
等着开始一步一步的走了,啊来,我接下来呢,点卸载组件,你看着啊,各位走组件卸载了,但是什么问题出现了,嗯,又是那个问题吧,同学,组件都没了,定时器是不是没关呀?那也就是说接下来你也能猜到我要干嘛了,我这个函数,注意这个函数相当于两个钩子,一个叫data mount,一个叫做date update。现在我得特别着急的找到另外一个相当于component will amount这么一个钩子,对吧?是吧,同学,你函数式组件里边得找到一个顶替他的人呢,那这个人在哪呢?同学,注意这个人呢,隐藏的很深,我问你啊。
17:09
红色的是啥?是函数?哎,这函数,哎,而且这函数相当于俩钩子是吧?Data up data data mount,好,如果你想在函数式组件里边使用类似于view mount这个钩子,那么需要。你返回一个函数,谁返回一个函数啊,红色盒子。那我完整的说一遍,红色的这个函数,它所返回的那个函数就相当于view on mount,那再说一遍。红色是啥?是函数,这个函数返回的那个函数就相当于component will amount,那你告诉我这怎么写?现在这个红色的函数有返回值吗?没有人说了,它返回的那个函数,你是写return的,返回的啥那个函数,哎,对,就它。
18:02
咋的,相当于component will mount?啊。那我就应该在这儿,怎么着呢?是不是清除定时器呀?但先别急,我们试试colo输出几个井号。我就看看我卸载组件的时候,它到底有没有处罚这个。回到页面刷新看一下效果,走着呢哈,哎,卸载组件同学是不是先走的呀,是不是相当于will mount呀。哎,那所以说呢,来吧,写着clear interval,您得给我个ID吧。那之前我们这ID啊,是不是挂在实力自身呢,完了在这儿就找见了吧,哎,那这怎么办呀。这怎么办呀?哎,非常简单,各位light timer等于我定义一个变量,是不是可以接收啊,那你这直接写个timer不就得了吗?那按照作用域的查找这块没有timer,往外一找,那不就找到这儿了吗?对吧?哎,好了啊,Clear inter来咱试一下啊,回到页面刷新看效果,一步一步开始自己增长呢,是吧,卸载组件走。
19:12
哎,也没报错,Component will amount是不是模拟出来了呀?哎,同学,那你说刚才啊,我在讲use state的时候,可能有些同学说老师挺好的,以后我就不写类式组件了,我就写函数式的是吧?哎,我用这个感觉挺好,那同学我问一下,如果你在函数式组件里边,要是想用hos去模拟生命周期,是不是稍稍这个写法有点不太美观呀,有点绕啊,哎,好。这就是我们讲的use effect,回到我们的笔记,也给大家整理好了,各位不用你单独再写了啊,来串一遍effect hook可以让你在函数组件中执行副作用操作,啥叫副作用啊?就是模拟生命周期钩子,哎。
20:00
啊,那第二个react中的副作用,那也就是说生命周期钩子里边一般我们都干嘛呀,你比如说法架请求数据啊,啊,订阅消息啊,启动定时器啊,还有就是极其罕见的情况,就得需要你亲手去操作盗墓,但是我们一般说啊,同学。你都已经用了react,是不是尽量避免自己手动操作到呀?哎,那语法说明咱说了use effect,注意了啊,给你画个红色的框,Use effect。哎,这啥意思呢?相当于两钩子啊,那么直接在这里边写啊,带有副作用的操作,如果你这不写,不写这个数组是吧?那意思就是监测所有人,那你这个钩子就相当于data amount和data up,然后你在这个红色的函数里边可以返回一个蓝色的函数,那么这个蓝色的就相当于view amount,做一些收尾性的工作。所以说呢,有些人可以这样去总结啊,可以这样说也不是错的啊,说use effect hook呢,可以看成三个函数的组合,Did did update和view on mount。
21:06
是吧,嗯,其实这个view mount呀,是它得有返回值use effect,传入的那个函数得有返回值才能模拟出这个人对吗?同学感受一下是吧,一个函数能模拟三个钩子,同学它模拟了两个特别重要的钩子,一个是data mount,一个是view on mount啊,它并没有设计说让你去模拟什么呢?说比如说模拟一个构造器啊,或者说模拟一个component will receive pro这种,因为没什么意义,甚至新的生命周期钩子都已经砍下去了,所以说同学人家模拟的这个就是这俩,最重要就是这data update,其实用的也不多啊,好,那这小节呢,我们停一下。
我来说两句