14_尚硅谷_组件_生命周期.avi原创

啊，刚才我们讲的两概念，两个两个组件，一个叫受控组件，一个叫非受控组件，其实从文档上面我们可以简单的比较一下他们啊。刚才我们说过，就是受控组件写起来稍微麻烦一点是吧？如果从编码的简洁性来说，非受控组件要写起来轻松一点。但是如果从思想上来说。实验是吧，你尽量不要操作动。其实我们受控组件已经在操作动了。啊，就非受控组件，我们看一下这里这个这样的写法是非受控组件的写法，就这一个。我们是不是把那个input给保存起来了，最后去读input的值啊。是吧，那此时我们实际上在操作动，只是我们是读。对吧？你看我们name input，这是一个原生的动物吧？

对吧，这不用了原生动物的语法吗？点。那我们的受控组件就没有做这样的事情？啊，OK。第二种写法呢，虽然说麻烦一点，但它更切近于的思想。就尽量少操作动。你就操作我的状态就行。这里面也写啊，大家看到就在大多数情况下面，我们比较推荐使用什么。售后组件来实现表单。但是他这个，他这个暗示，你就说我用飞车组组件能不能实现。可以。啊，可以用非受控组件来去实现，下面就是非受控组件的实现方式，跟我写的一样的，我就不带一个看。啊，其实前面呢，还说过一个，就是在这个非受控组件的前面有一个。啊。啊，就写正。

啊，不要过度使用，说白了就是在组件里面不要把这个东西用的太多。啊。那不用他，那我只能是不是用受控组件的方式去实现呢。这虽然说编码麻烦一点，但更切近于的思想。其实说实话，项目开发里面，你用第一种和用第二种，其实没有什么说，你说我们用第一种，你们老大就说你，你不能用第一种，你必须用第二种。也不一定，其实最终呢，你只要去实现了它的一个效果，最终没有效率上的影响，它其实它没有什么太大的效率上的影响。只是说这种思想。啊。稍微比下面这种呢要。差一点啊。行。如果从我个人的编码剪辑性来说，我更喜欢第一种，但是如果你要觉得，诶，我就想写出更纯的代码是吧，那你就用第二种，你也不怕麻烦，很好。

好，下面我们来去看第二个。就我们现在呢，要开始研究一下组件的生命周期，这个组件的生命周期实际上是组件对象的生命周期。啊，它是有生命周期这样一个概念的，知道什么叫生命周期吗？就是从生，从创建产生到什么死的一个过程。啊，OK，好，来还是一样啊，我们每个都一样的，你先不要想我们要学什么，我们先来看一下我们要做什么，做什么效果。啊OK，我们有这样一个效果啊，就是啊开始了有一个文本在这不断的做动画啊做见一见新的动画还是不断的隐藏，又不断的出来。就它是不断的隐藏，最后突然间出来啊，不是不断的出来，是有一个文本在这里是吧，它慢慢慢慢消失。消失到完全消失的时候，它就会猛然之间出来，出来再做慢慢消失，就是一个慢慢消失的一个动画。

能懂吧，啊这个漫消是怎么做。OB吧，你你不能说是按啊，那就突然就消失了嘛，对不对，你把它开始等于一对不对，等于0.90.80.70.6。到零它不就，而且你中间是不是有个间隔时间，就可以，每隔多长时间，我就减少0.1。对吧，到了零，那我就把它变为什么变为一。对不这样可以吧，可以。好，这个下面呢，我还加了一个按钮。啊，OK，学不会怎么办？那不活了，不活了意思是什么呢？就我按钮一点，就把这整个组件给它干掉。啊，一了百了啊好行，来我们来看一下，我们先写做一些我们能做的啊，先别管什么生命周期的东西。

来我们把这个不是这个是吧，下一个。生命周期。这个需求呢，我这不再读了，刚才大家已经看到了，来还是要第一个主页呢。名字，我名字。啊，Life是吗？好，行，就life主页是吧，好啊，react.component，哪一个re，哪一个return。啊，来个括号里面写东西是吧，好先放它，先把下面写写。react.re来一个。

Life有公里啊，让它生产的人快一点来，DAD9公里。啊，例子，嗯。行哎，先把这个界面先简单的显示出来啊，先来个div。管它D里面上面是不是有一个简单的文本是吧，应该是个H h2差不多是吧，HR吧。OK，这个文本呢，你我希望你能传过来。啊，文本希望你能传这个怎么办？那就传呗，就是你想显示什么样的内容，什么样的message可以吧？啊，假设你想传啊穿什么，其实很简单，对吧，太难了是吧？哎，说到这个太难了，我就想起那个网上那个小女孩，一加一等于啊，那还记得吗？啊啊OK啊，991乘一得一，什么三五十五，三五二十五，太难了，那个那个挺经典的，太难了。

好。那我们最终我们要去啊，那个那个proper我就懒得写了啊，来这个地方这个怎么做。这个是不是显示啊，啊，OK this pro点啊，这还需要一个什么，But啊，不活了。来看一下。啊，就这样是吧，好，我们先做这个动画效果，也就是说他要慢慢写，慢慢隐藏啊，慢慢隐藏，隐藏到不能看得见的时候，突然在显示在做啊。那也就是说这个时候我们的这个HR是不是应该有一个样式，懂不懂，而这个样式的应该是不是有个OB，而且这个OB在什么变化？

那你想啊，现在我能写，这不算吗？能不能，不能说白了，我应该有个状态，对不对？我应该有一个什么样的状态，是of city的状态？说白了，我们把这个状态先搞一下啊，先把这个状态准备一下，下面才能写。Pro。啊，接着啊，我们叫它什么？初始化状态永远是固定的this.state等于一个对象来取个名字。透明度嘛，这不OB嘛，就写OB就写开始之为几一因开始显示的啊好。那下面呢，也就是说我的这个style应该是不是那个OB的值，应该是一它的值对不对，那我先把那个先把这个OB取一下。

啊。等于this点反正用了先取号，那我这里怎么写呢。大括号代表我要写GS了吧，好，我要写GS了，关键是大家知道啊，那个样式它是不是很多键子都有。对不对？好，你就这么写，看着我写啊，Over，冒号over。啊，是这样的吗？大家想啊，这个大括号的作用是什么？代表我里面是写GS对不对，我现在又要可能写很多卷子，对。你说我该怎么做？你得，你得建职队拼串，不行，你再得写个大括号。是不是这两个大号的作用不一样，两个大号的作用不一样，外围的大号什么意思？外围的大号是代表我里面是要写GS代码。

对不对，而里面这个大框呢。是不是我里面的代号代表我是一个什么GS的什么东西对象嘛。懂不懂啊，是一个GS的对象啊，这个大家应该要清楚，也就是说我现在。是这个样子的，看懂吗？我的这个这个属性名能是被瞎写吗？能不能这个什么名字，这是样式名。这是我的样式的名称，样式名不就是这么串吗？知道不？当然你也可以加单引号或双引号是不是，而这个是什么？是我的值，按说来说应该写可以写成这样的。

能到吧，这就ES6的写法嘛啊，但是它好像这个工具好像不识别的对不对，能看到吧啊，我们先不让它报错啊，先用的这个啊，反正现在我我看着这种我就觉得不舒服。啊，因为写多了嘛，你老写大括号，写一个名称写多了啊，先先这样写着，这里一定要知道这两个大括号的区别。为什么我这里要加两个大括？首先外围的大括号是代表里面要写什么JS代码，而里面四个GS代码的大括号和JS代码大括号是什么对象？这个要搞清楚。嗯，好。那现在来说，你说我写他，他会变吗？不会，但是呢，这个时候应该会有一个样式，能看得出来OB为几。下面我们要做的事情是什么？就不断的去改变这个OB的值，就不断的减少它，对吧，减少了一定减少零呢，就改成一是吧，好，那这个得用什么技术啊。

你像我得不断做一件事情了。每隔段时间不断做，不能一直做，对你得隔段时间做一下，隔段时间做一下定时器，那定时器有两种啊。啊，对吧，延时定时器和什么循环定时器，而应该用什么循环定时器。那就有一个事情，我们是不是在某一个时刻要去启动循环定时器？能不能？那我们在哪去启动呢？那我在render里面去启动好吗？大家知道render它是会，它一旦改变就会重新的调用啊，OK，也就是说我在这里面啊，我在这里面，因为我们启动定是不是要修改这个OCT状态的，你一旦状态修改，是不是要重新的去渲染我的这个组件呢？

那调用哪个方法才能渲染组件？这是re嘛，渲染的意思。那也就是说我不能在这一个方法里面去启动定时器啊，我应该在哪个方法呢？这个时候就涉及到组件的生命周期。啊，就是组件，它是有一个生命周期的概念的。啊，不过它这里面的生命东西上没有没有去画图，所以说你看起来比较比较别扭啊，我这里面还有一个图看起来好一点。啊，第一眼看的这个生命这个图还是挺挺复杂的，因为太多，这个得说一下啊。这里面呢，有定给大家看见了很多的方法，大家看到吗？有的方法我们还认识，譬如说constructor，譬如说render是吧？哎，还有一些别的方法，你看它它的方法名特别意特别有意思啊，看这名字，看这个名字怎么读，叫组建将要大家知道mount什么意思吗？

叫挂载。啊叫挂载啊，什么叫挂载，那知道那个挂载的感觉是什么，你要知道开始是在内存里面的，虚拟动是在内存里面。最终我是不是又有一个的话，最终把它插入到我的页面的某一个容器里面去。啊，就好像这是我的页面，我的页面呢，开始有一个空的容器，里面什么都没有啊，我现在呢，有一个虚拟动对吧？啊里面有很多东西，很多标签，我最终呢，是不是要塞到这个里面来显示。那这个塞进去的过程，它把它称为一个操作叫什么呢？挂载挂上去就挂到页面里面去。啊。这个能不能懂，这个挂不是不是不是完了的意思啊，啊是挂上去一个钩子挂上去的感觉。啊，能不能因为这个卦它有两种意思嘛，对吧。

好，大家看到，你看这个where是在谁之前轮的之前。能懂不，也就是说只有执行了render，是不是才有可能将我这个组件挂载到页面上去啊，能不能懂啊，OK，那执行完re以后，你说能看看这意思什么意思。是不是已经挂载了，就说白了就已经显示了，简单来说能懂吧，就已经显示了。好，这一个是初始化的过程。就说白了，第一次挂上去，初始化显示的过程就会调用这些方法。啊，这些方法称为什么呢？生命周期毁掉函数。哎，前面我们是不是在说过那个什么样的函数称为回调函数，还记得不？啊，你定义的你没有掉，但最终它什么执行了，润的方法是不是你定义的。

你不是每次都重写一个re方法吗？你有掉吗？没有，但它掉了没有，它不掉，怎么显示一个结构呢，对不对。能不能啊，OK。这些方法我们把它称为啊，生命周期的回调函数啊，也有时候也叫生命周期的钩子。啊。这个大家都要懂啊，因为都是些专业术语。而这些生命周期的呃方法，它是在特定的时刻调用。而且永远不变，总在不同的方法，在不停的时刻，这已经设定好了，说白了，你想想看嘛，现在我们是一种生命式编程。什么是生命式编程呢？啊，什么是生命，是编程，就是整个流程。哎，说到生命编程，我要说两种，两种数学题，一种叫填空题，一种叫问答题。就问答题是个什么概念？

就是你要说，哎，第一步做什么，第二步做什么，第三步做什么，就是你要是不是自己去跟他说清楚流程了。在流程里面，每个流程里面第一步做了什么事，第二步做的什么，第三步做了什么事吧。看到吧，还一种题叫填空题，那填空题怎么回事？就整个流程都写好了，中间有个空需要你填一下。是不是这概念？能懂吗？嗯，OK，那其实这种就对应两种编程方式。啊，一种叫meaning编程。啊，OK，一种叫生命式编程，什么叫命令式编程呢？啊，以前我们用节拍去写，效果就是命令式编程，你每一步都要自己写。你不说什么，哎，先把这个找到这个div啊，找到这个div以后呢，下面呢，我往里面插一个什么东西，插个什么东西以后呢，下一步呢，我来改一改。就每一步，每个流程是不是都你在操作。你要不操作，那肯定不行。

所有流程是不是都是你控制？啊，你就是发现命令，所有的命令都由你来发，那生命是变成什么概念？流程已经设计好了。你看我在管流程吗？没有，你看我们在写东西的时候，我们定义好组件以后，我创建了吗？兑现是我充钱的吗？是吗？不是啊，这个论的方法是我教的吗？我也没掉是吧，我就要干嘛，你想。我是不是就要告诉他，诶哥们，我要学这个。你是不是写一个return，把这个第写进去它就出来了。是吗？啊OK，就我的组件要显示什么内容，要显示什么标签，你告诉他是不是就可以，至于它是怎么样啊，把虚拟多转化真实多是怎么更新的。你要搞吗？你要更新界面，怎么更新。是不是你的哦，出来了。你有管他怎么，你中间是什么过程吗。

没有。过程已经设定好了，已经固定了，说白了，这些生命周期的回调函数。啊，你其实你不写它也会掉。只是说，你要不重写，你就没有机会插入你想做的事情。那这些方法，譬如说这个方法我要不重建，我们一直没重写他吧，一直没学过，包括这个方法我们也没重修过。它本来就在掉，只是说我们为什么研究它是想，诶我们把这个方法重写一下啊，重写一下这个方法能干嘛呢？哎，我能做一些我想做的事情。比如说我们现在是不是要去。启动一个循环定时器啊。你说我是在更新的时候去启动，还是在初始化的阶段启动啊。啊。初始化的时候我上来就准备好啊，因为定时器只要启动一次就够了吧。

对不对，所以啊，这个时候我们就要利用他的这个生命周期回调函数去做，譬如说我们经常就会去重写这个方法。重写这个方法，重写这个方法干嘛去了？大家看啊，一上来是不是通过的方法显示了我的那个那个OB为一的那个效果，那下一步是不是要慢慢的，慢慢的去变得隐藏起来，透明起来。那我需要定制器吧？那现在大家看到这里面有个方法叫component did mount，来试一下，试试才知道。啊，我重写一个方法叫什么，Component did mount。对吧，我在这里面干嘛叫启动什么循环定时器来启动啊，Set timeout对吧，来一个什么。

放。接着了。指定每隔多长时间变一次，对不对？每隔多长时间，大概譬如说假设一两百，100，也就是说大家希望那个消失花多长时间。譬如说你要花一秒啊，我每次减0.1啊，每次减0.1。啊OK，每次演练其实快慢都我感讲差不多行啊，譬如说我想在呃两秒钟。两秒，那我应该是200对吧，因为我每次减0.1嘛。就能问到啊，那一共不十次嘛，十次乘以200不就得2000吗。这个能不能动啊，好，下面。我在里面干什么？是不是要把这个值给它减0.1啊，那我先读到这个值呗，读到这个好多。

来读一下this state。不用不用再点了，够了是吧，再接着呢。减等于0.1。对吧，诶这个不能用，看应该用什么let对吧？接着呢，还有一件事情，它有可能是不是变为零了，那怎么办？E OPPO city等等于零了。啊，等等于什么零，那我干嘛呢？让它为一是吧。但是我这样更新状态了吗？没有，最终要调用一句话啊，更新状态，This时间，什么set state。能不懂前面都是在修改OB对吧，最终是不是更新状态。

能不懂啊，能看到吗。这看不出来吗？哦，是吧，不然的话只有一次。OK。好，那现在呢，我们来看一看，看看是不是啊，现在有问题。嗯，对，This不对啊，有人眼尖啊，太尖难都有点受不了了啊，This有问题，为什么有问题？大家知道这个set into回调函数，这是谁？Window对吧？啊，既然都看出来，那我们就不去测了，我们先改了，怎么改？啊，这里面啊有几种考法，一种是用半的，一种是用建筑函数啊，我们用下半的。这个意思对吧。这个类是处在这个这一个函数里面的意思，有人说老师你不担心这个函数有问题，类有问题吗？这是它的内置的生命周期回调函数。

是我定义的吗？是我定，是我想出来一个设计的一个名字吗？不是。是他，我相当于重写。能懂吗？重写的意思是对的。有没有看到啊，那也就是说最终交给这个set in the world是这个函数吗？不是，是通过什么band产生的新的函数，但内容都是一样的，对吧？啊不用担心。好，下面我们就来看一下呗，看一下。走你啊。嗯。这里面应该是有一个问题，就在于应该小数的减法里面估计有一点误差。

能懂不啊，有点误差，所以我来一个什么小于等于零啊OK，就刚好有点误差，刚好不是刚好等于零，因为小数加减法有点有点误差的啊，来刷一下。能看到吧，嗯。确实误差是吧，好来下面。这好，懂吧，下面我们要做，有人说老师我不想活了，怎么办？我确实就是觉得学不下去了，是吧啊。这里面有一个，来看一下图。啊，有一个有一个东西这个图上面倒没有太体现出来，我跟大家说一下啊，跟大家说一下。那个do里面有一个方法，这个方法名字特别长。

啊叫amount什么意思，Mount是挂载amount了，天呢，你这你这翻译也是太卸载啊，不挂载不挂载好像是我不挂上去似的啊移除也行啊，彝族也行啊，你别说不卦载啊，啊卸载好卸载谁。卸载主件是吧，在a load load什么意思？节点就是卸载某一个节点上的什么组件。这意思不啊，OK，就是相当于我想把当前组建对象给他干掉啊，该怎么做呢，来。首先我要给他加什么，点击监听on对吧，哪一个this点啊啊就是写一个吧。

三吗？RO吗？啊，什么呢？Component。啊，既然他写个长的，我也写个长啊，这里面从这里能看得出来什么意思，建民之意是最重要的，长短不是最重要的啊，建明之意是非常关键的，来下面。对吧，来先写下那个，不管它啊，这个就上当多了，你就知道了。啊，OK，好，在这个里面我是不是要去销毁当前的这个组件对象啊，啊，用到的是谁？record.on mount。这个是吧，好，这个地方就指定是哪一个节点里面的组件，你说我要指定顺序。

是不是应该指定它呀。我的组件不在这个里面吗。真的吧，所以啊，跟那个re是一个一个搞法，Did找你。看着吧，好。来啊，我在这里面呢，写一个打印语句，来看一下我的这个定时器执行了，对吧，定时器执行。中间有一个有一个问题的要暴露出来。我们先看一下。是不在执行没问题吧，好，接着我来去干一下，走你。这一个也就是说我们组建对象是不是干点界面都没了啊，大家看一下啊，我们的那个div是不是变成一个空的div了，组件被干掉以后，组件的界面也没了，能不能好？但是呢，有个问题啊，定一时器还在跑，他跑了还有意义吗？没有，这就是什么内存泄露。

对吧，你要不做处理，那他就一直跑着停，想停都停不下来，除非你把页面关掉。对吧，那我们什么时候去。干掉去清理一下定时器了啊，我点的时候就去操作是吗？啊这样比较死板看一下比较死板看一下啊，看一下生命周期。嗯，当我去移除干掉某一个组件的时候，这个组件的生命周期会调用一个方法。叫component well among，什么意思？看名字组件将要被什么？说白了，他准备去干掉当前主线之前，他先调用了一下这个方法来通知你。

问，你要不要干点什么事？其实调用这个方法就是给你有机会。还去干个什么事情？能懂吧？每一个生命周期回调函数都是给你一定的机会，在某一个时刻做一个什么事情，那不同时刻做的事情不太一样，譬如说此时我就应该在这里面去清理什么定时器。啊，就用这样一个方法啊。把这个方法来用一下。大家注意啊，Run的方法永远写在主键的最下面，因为它最重要。那么呢，构造器一般写在最上面。中间写别的。这是个习惯啊，其实你不这么做也行，但是啊，这么做能更好一点，风格统一。那我这里面干嘛去，是不是清理定时器啊，清理定时器来吧。

叫克利尔英特怎么不出来？出来吧。要传一个什么。看着看你看的提示的提示看不出来吗？Number类型不是number。什么东西interval ID？看不到那个单词吗？啊，那也就是说我要指定清理每个定时器对不对啊，每个定时器都有一个标识ID，那标识ID在哪呢。哎，对，这个set返回的就是当前产生的啊，定时期的ID。那我这个地方就是interval ID呗。是吧？那现在我能看见他吗？看得见吗？看不见呢？

因为是两个座率嘛，两个函数咋办呢。再一个就是说我两个人在不同的作用力里面是吧？啊，我想看到同一个东西，我是不是要想办法要存在一个大家都能看得到的地方了，那就两种搞法，一种是放在全局变量里面。这样其实是最后的选择，没办法了才这么做。因为我们说过尽量少涉及全局变量，对吧，另外一种就放在一个咱俩都能看到的对象里面。能懂不？咱两个函数如果都能看到同一个东西，那我就放到它上面，那咱俩我就不去读吗？一个放一个读吗？那我们都能看到谁呢？对，都能看到组建对象。我们是同一个组件对象的方法对不对？那我应该不这么做，不定义变量应该是什么Z点。这种思想啊，并不是说当前一定要用认识点。

啊。如果两个函数想看到同一个东西对不对，那应该想办法把它放在一个咱俩都能看得到的地方，而看到地方啊，可能就是同一个对象里面。那我现在怎么做，This interval ID？你说完，万一他没有了，怎么可能没有呢？这是你写的，也就是说有没有可能他先执行的。不可能的，因为这个生命周期回调函数，它的调流程早已经写好了。只是不是你写的而已。懂不懂，所以不会出现误差说啊今天是好的顺序，明天哦，这个新调用不可能啊。好，来，我们看一下，看看还会不会出现，我的天啊，这掉的次数挺多的啊，没关系，刷一下。

好，下面我要不活了。这次就对了。