00:00
好,各位,我们再讲下一个扩展点,它的名字呢,叫做错误边界啊,英文的名字呢,叫做arow boundary,我们这词呢,也是摘自react英文网里边的这么一个目录里的词儿啊,叫错误边界,大家先别急,我们先不说错误边界的事儿啊,先别看这些总结,我们呢去看一个事情回到我们的代码当中,我的代码呢,目前运行着呢啊,咱们讲到第七个了,打开浏览器啊,我的这东西是吧,刚才在讲这个render pro是吧?诶还在这儿呢,那点击加一,诶这也是可以的。好同学,我们现在啊,就属于在开发模式下运行我们的项目啊,开发模式下。也就是说呀,你看右上角啊,这个图标啊,它处于一个红色的状态,哎,上边呢,还趴了一个小臭虫,那这个意思呢,就是你处于开发模式。但是大家都知道啊,你像美团啊,斗鱼啊是吧,哎,这种这个知名的拿react写的这个网站呢,其实你打开之后你会发现啊,人家那图标吧,是纯正的react logo的那种蓝色是吧?嗯,你稍等看右上角各位这儿是吧?那我们的为啥是这颜色呀,一直那是因为呢,我们的项目呢,没有经过打包啊,什么叫打包呢?学过web的同学可能就都知道,我们webpa呢,有一个最强悍的功能,就是诶web pack啊,有一个最强悍的功能就是分析你的静态文件,把你所写的Li呀,ES6新语法啊等等等一系列的东西是不是给你打包生成浏览器认识的最纯正的AML GS CSS,而且能帮咱们处理好兼容性啊,对吧,语法检查呀等等这些问题是吧,那都能处理好好,那就是因为我们的这个脚手架写的案例啊,你是通过NPM。
01:56
Start,通过这个命令,你启动的DV server,然后帮你开启了一台服务器,所以说呢,很多的东西没有进行最终的打包,所以说它是红色的,那如何把一个写完的项目进行打包呢?你就比如说好多的程序员把自己应该做的东西都做完了,功能点都实现了,那现在怎么办呀?案例写完了呀,或者说项目做完了呀,那我是不是得经过打包这环节呀?好了,那回到我们的代码里边打包呢?我们需要这样做,第一步啊,停掉你的开发者服务器,清空一下,然后呢,你执行n PM run build。
02:35
同学,如果你听过上硅谷的webpa课程,在webpa课程里面我们是详细的跟大家聊过这个命令的,N PM wrong build对吧?好,那个短命令呢,咱也说过,是不是在这儿可以看到啊,你看这不是开启DV server吗?这不就是构建打包文件吗?好了,那我们执行一下啊,你注意看我这个目录里呢,是没有build的这个文件夹的,对吧,没有,那当你执行了这个命令,Npm wrong build,走你这个时候啊,脚手架呢,就会帮你分析你的静态文件啊,帮你做一些什么这个初步的一些处理,你比如说兼容性啊等等这些啊,然后最终呢,生成浏览器认识的最原始的,就咱说那个atml CSS JS,好,那同学你看啊。
03:20
一个文件夹是不是出来了呀,好,我们打开大概看一下啊,大概看一下走。是这样子的是吧?这就是主页面,这就是哎网站的图标,这个呢,哎,就是那个什么manifest Jason做夹壳的那个是吧?De,这里边是CSS还有JS啊,以及你所写的样式就都在这儿了啊,给它折叠起来,同学,这些东西呢,我们不需要去过分的关注了,你比如说你打开static同学,咱就说这个你打开的JS同学,你的JS呢,已经经过了高度的压缩,名字甚至都给你改掉了,你说这O啥意思呀,这咱就说不明白了,对吧?这是压缩之后的代码,不是让程序员看的,不是让程员改的,是交给浏览器直接运行的老师,好嘞,那我明白了,这有主页面,然后我就右键,然后我就打开。
04:10
同学,你这样打开肯定不行,因为构建完的这个打包文件呀,不是让你在浏览器里边右键去运行的,需要你部署在一台服务器上才可以,所以说如果现在你手头呢是有一台服务器的,就可以把这个作为服务器的静态资源进行一次部署,就可以看到效果了。但是啊,我们也知道谁手头能有服务器呢,是吧?很少啊,可能有一些同学说,老师我阿里云上有,对吧?线上的服务器我直接来一个命令推上去了,但是会这种操作的同学毕竟是少数,对吧?那我们如何把这个打包之后的文件运行一下呢?那么你有两种选择,一、同学,你是学习过这个东西的人,Express框架对吗?这是node里边用于快速搭建服务器的这么一个框架,如果不知道的小伙伴呢,那我推荐你学习一下咱们上硅谷的express这个课程啊,还是很不错的啊好了,那第二个选择呢,就是一借助什么呢?借助一些第三方的。
05:10
库快速的帮你搭建起来一个什么呢?服务器好,那有很多第三方库啊,同学都能做这样的事儿,就是以指定的文件夹作为服务器的根目录,快速的帮你开启一台服务器,帮你部署这些资源,帮你打开浏览器啊,那给大家推荐一个使用量比较高的吧,它的名字呢,叫做serve。注意各位不叫啊,不叫server,叫serve。I serve,好,那需要你做的就是全局安装这个库,其实同学你看没看见脚手架呢,哼,都告诉你你应该这样做,都推荐你你这样做,那所以说来吧,首先执行第一步,NP mi serve,空格杠G啥意思呀,全局安装这个serve,为什么全局安装,安装以后啊,在任何的地方是不是都能用这个命令啊就比较好嘛,稍等等它安装啊。
06:11
好了,安装完了对吧,那接下来呢,诶同学我问一下你在哪儿啊,你是不是在这个路径啊,那这个路径是哪个路径啊。就是这一堆啊,就是这一堆,所以说接下来呢,你执行一个命令就可以了,Serve啊,就叫serve空格输入你想哪想以哪一个文件夹作为个路径,我想以哪一个文件夹呀,是不是以build文件夹呀,对吧,里边是不是有index呀,是不是有这些静态资源呀,好了,你只需要输入serve空格杠build啊。有些这个命令吧,和大家讲啊,其实它完整的命令很长,Server build,然后空格杠杠port指定端口号对吧?Port这个库还有很多的用法,但是一般来说同学我们不用写那么复杂,你就serve build就得了,如果发现端口号冲突,它自动就换别的端口号了,OK,好,我们敲一下啊,So,空格build走。
07:10
服务器开起来几千呀?是不是5000呀,按住CTRL键点5000同学。浏览器打开刷新啊,诶东西是不是出来了,如果它慢了,你稍微等一丢丢就可以了,出来了吧,同学注意颜色是不是对了。哎,兄弟你可要知道这就是一个上线的项目了,已经经过了最终的打包是吧?哎,你整体来说,现在你运行这些东西可比你自己要来一个什么n PM start,那速度可要快得多,对吧?当然我们的这个逻辑很复杂,所以说你感受不出来对吧?逻辑如果要复杂了,你明显感觉,诶这个运行速度那是很快的,对吧?这就是如何将一个应用打包上线去运行,好吧,诶,行了,那大家学会这个了,浏览器呢,我就关掉了,然后呢,我把这个serve的服务器啊也给它停掉,好,那这个给它关掉来,那这个build的文件夹呀,我给它删下去啊,这个呢,我不给大家,为啥呢?哎呀,因为你那是不是也能生成啊,哎,自己得练习一下是吧?来删掉这东西呢,没有必要留着,随时随地呢,咱都能这个在生成,但是你看啊,我这目前不让删,那一定是因为我的Vs code开着,所以说我现在删它肯定删不下去啊,我把Vs code关了就好了,那我现在不过。
08:27
完了,咱先接着往下讲对吧?好,打开src,打开components,同学们,咱们要讲啥来着?回到笔记里边叫什么?哎,错误边界对吧?什么叫错误边界呀?来,慢慢来吧,它的英文名字叫做arowary,我把这个复制右键新建一个文件夹八_a boundary,这个B呢,让它大写好。错误边界啊,慢慢来引导大家一下,同学呢,我为了能让你把这个事情看得更明白呀,接下来呢,我建立俩文件啊,我建立俩文件,一个叫做parent.gs叉啊,这一看就是副组件,我再新建一个叫做child.gs叉啊,这一看呢是吧,哎,这就是子组件,好了,都关掉,把parent写好,RC。
09:18
啊,直线关掉啊,RC走啊叫parent在这儿呢,写上啊,咱这样吧,写的标准一点,我写个H2标签吧,哎,叫做我是parent组件,好完事了,那再把这一堆复制来到child里边走,名字改一下叫child啊,然后说我是什么组件呢?我是child的组件。那child的组件呢,我就想展示一些信息,你比如说啊,各位state啊,我写一个叫做呃,Users,展示一堆用户的信息,是个数组,每一个用户呢,是一个对象,ID001啊走是不是有名字呀,名字叫Tom,那还得有年龄,但年龄是八岁好了,走准备几个呢?准备三个吧,不用太多,二三好,这是002003啊Tom那这儿改一下叫做Jack啊JCCK,那这个呢,随便写一个吧,就叫佩奇啊来,这是19岁,那这个呢,是20岁好了,数据呢,我是不是准备好了,各位接下来呢,那就便利一下子呗,走this.state.user.map对吧?诶,Map,走,然后给一回调啊,那回调里边拿到的每一个呢,都是一个user的obj,是一个对象,对不对?那返回一些东西吧,走retn,嗯,我返回一个H4标题吧。
10:45
啊,那这里边写上啊,首先展示的是人的这个名字是吧?啊,缩进一下,然后杠杠杠杠杠啊在这杠吧,在这里边杠杠杠,要不外边还得包结构嘛,是吧?先生,这叫做user OB j.age是不是年龄啊,嗯,但是你千万别忘了啊,每一个人是不是应该唯一的key啊,我在这儿同学是不是只是想做一个列表的最基本的展示啊,没有对数据的破坏顺序性操作,所以说呢,User OB bg.id是完全可以用的啊,或者说哎,我刚才所表达的啊,说用这个index是不是也可以啊,哎,但是啊,同学你是不是有ID啊,那就用一下ID呗,是吧,好。
11:25
写完了吗?哎,那么parent里呢,同学,我是不是可以引入一下port谁呢?哎,Child from当前目录下child,那我把child呢想渲染在这个位置,诶这么一写是不是就得了呀?回到APP里边,我们是不是得引入八呀啊走着好了啊,开启一下NPM到他来,咱看看这玩意儿现在长什么样啊。稍等,等着它开启。哎,有点问题啊,说呀找不到东西为啥呀。
12:03
如果你练习的时候出现这个问题,想想。他说模块没有找到,不能够解析这个东西,回来吧,走你的APP里边是不是没引到位呀,咱说index你可以写到这儿就不写了,但是你这是不是叫做child和parent呀,哎,那所以说了吧,走谁得写上啊,Parent好了保存回到这刷新等加载。哎,出来了,我是parent的组件,我是child的组件,哎,这一堆信息是不是展示出来了呀?好,那么同学啊,你要注意,谁也不能够啊,保证就是自己编写的组件,它没有错误。而且有些时候呢,咱还得这么说,这错误啊,有可能都不是你造成的,可能是后端的数据啊,对接的时候出了问题,你比如说同学我跟你说一个错误,你看呐,APP我先关掉这个子组件里边,我问各位一下啊,子组件里边。我是不是有一堆人的数据。然后我是不是卖它便利啊,同学你说假设呀,假设后端给你返回数据的时候,它返回的不是数组,它给你返回的是一个字符串。
13:09
哎,你忘了解析了对吧,那里边写的什么,哎,这个name啊,什么什么多多少多少,你就比如说我随便写一个吧,他给你返回来这么一个东西ABC。同学,那你说你是不是废了呀?ABC能map吗?不能,那所以说你回到这它肯定报错呀,This,点点users map is not a function。那回到代码中,咱得这么说,同学,我这些逻辑是建立在你后端给我返回的东西,是不是一个数组啊?但是如果你给我返回的它不是一个数组,各位。那你说你比如说你就给我返回一个字符串,我知道这是后端的锅,我知道这是后端没把数据给咱传好,但是同学那你前端直接这么给用户看,那是不是也不太好呀。是吧?那怎么办呢?咱最理想的呀,是这样撤回来说,如果你数据正常吧,刷新。
14:03
我就给你正常展示数据,如果是由于某些不可控因素,比如说可能是程序员写错代码了,后端数据出问题了,服务器崩掉了,返回的东西是安de find就等等,由于这些问题啊,说老师那我可以加上缜密的判断,你不一定在开发的时候,那么多的组件你都能加上那么详细的判断,你说对不对,同学你想想对象点属性,如果取出的是安范,你在点是不是就报错了呀,所以说很多东西吧,同学不是说我们说哎,就写判断啊就能控制的,有些时候你根你根本控制不了很多,你想不到错误,未知的错误对不对,所以说我们要学这个错误边界,错误边界什么意思呢?你听我说,同学你说整个这红色框啊,是不是副组件。哎,那你说这蓝色框啊,各位是不是子组件,哎,那我想问各位的是啊,你说错误边界啊,如果他要能这么做是不是就挺好的啊,你比如说子组件是不是出错了呀,好。
15:01
那我保证父组件的可以正常的出来,然后我在子组件应该展示子组件的地方,我展示一句话,安抚一下用户,你比如说网络繁忙,请稍后重试,对吧,这就具有套路性了,其实是你那个代码出问题了,但是对于用户来说就觉得啊,这网网可能有点问题,一会儿再试吧,对吧。哎,你看这不就挺好的嘛,所以说所谓的错误边界呀,就是说不要让一个子组件的错误,然后影响着整个组件都出不来,什么叫边界呀,我把这错误控制在一定范围之内,你子组件出问题,OK,那就子组件出问题,然后不影响父组件的正常展示啊,而且呢,你把这个错误要控制在子组件里边,不要再往外扩散了,这就是错误边界,OK,好了,那怎么用呢?同学是这样的,我们想用错误边界呀,你需要在副组件里边动一些手脚,而不是说在子组件里边,这是大家需要注意的所谓的错误边界,错误边界应该在容易发生错误那个组件的副组件里边去做一些手脚,那所以说呢,我现在得在哪做点手脚呢?在parent那回到我们的代码当中来啊,你差的组件呢,同学,我就故意让他犯一个错误啊,你看着故意犯一个错误,咔咔一删。
16:22
我就给个字符串ABC,那这样吧,同学,我这个呢不删,我再复制一份啊,我把东西呢给大家留下,因为回头呢,大家其实需要看代码的对不对,好,我写个ABC,同学这就犯错了,这就是后端没有给你返回一个规整的A,一个数组,这个Jason数组,然后让你展示对不对啊,那怎么办呀,你现在要直接这样的话,那肯定那短。对吧,你比如说这是一层,这是一层,然后呢,再来一个,这是一层,如果粉色的组件出问题了,是不是导致整个应用短全都出不来,对吧?那所谓的错误边界就是只把这个错误限制在这个范围之内,不要再往外扩散了,那你不能跟他去谈,你要跟它的副组件去谈,所以说我们找到谁呢?来到代码里边,我们不在child里这做做文章啊,我们在parent里边做文章,你呢,得用到一个特殊的方法,同学,这个方法呢,呃,你其实见过之前跟他类似的同学,我们之前好像见过这个方法叫做get derived state from props,同学,你是不是见过这个东西?
17:31
Get derived state from props同学,还记不记得这个新的生命周期钩子了?它能干嘛来着?如果你的状态完全取决于外部的props,你是不是就得用一下这钩子呀?I,不知道大家还记不记得了啊,是有这个钩子的啊,Getra state from props,如果忘了呢?赶紧翻翻之前的东西是吧?哎,咱不说新的生命周期钩子废弃了三个,新提出来两个吗?那这就是两个当中的一个是吧?啊,说老师,那我知道了,我们得用这个,不是不是不是,你想用它的时候,你记不记得前面还得加个static呀?哦,得加static,那同学注意了,我用的并不是这个。
18:10
我只需要改一个词儿。你这个东西直译过来叫做从props那里获取一个衍生的状态,或者是一个派生的状态,对吗?在这儿呢,不from props了,From哪呢?A。哎,这块是特别主要的。同学,Get derived state from l啥意思呢?如果这个组件的子组件,注意啊,不是他自己,如果parent组件的子组件。出现了任何的报错,那么都会调用这个钩子。哎,都会调用这个好,而且调用的时候他把错误给你传进来了。那我们为了看这个错误,所以说呢,我们可以给他进行一次输出。
19:03
好,哎同学,所以说明确啊,这东西什么时候调用啊,写好了叫当啊T的子组件啊,出现报错时会触发它的调用,并携带错误信息,错误信息是不是给你了呀?哎,那你知道你接下来要干嘛吗?你可别忘了这个方法的名字呀,叫做获取一个衍生的状态呀,兄弟,所以说要求你这里得返回一个对象,就跟之前你学习那个get dive state from props是一个道理,你得给我返回一个状态对象,那你比如说我写一个叫做has e or,然后呢,错误的信息就是arrow,那你这啥意思,我这么返回啥意思吧?
20:02
Has arrow代表着是否有错误,那arrow呢,是具体的错误信息,好,你注意各位,我需要在parent里边提前定义好这么一个状态,对吗?哎,这个状态叫什么呀?Has AR,然后直呢为空。可能有些同学啊,在这都忘了吧,来给大家打开一下吧,打开文件夹找一下咱们那个我桌面上啊给大家之前不是写过那个react,那个叫做dating是吧,在这里边咱是不是说的,诶在这里边是吧,咱说的那生命周期,来同学我打开一下,我让你瞧瞧啊,打开一下让你瞧瞧啊,这个得保存一下啊打开还记不记得了呀,生命周期,然后找到心同学,我让你见识见识那个东西往下滑往下滑,诶在上边的吗?走再走再走再走,诶这这这这这这什么意思呀。是不是get derived state from props啊,那然后你是不是得返回一个now或者是状态对象啊,那你返回一个状态对象,你如果说了那个count的值是100,那我问各位这个值是不是永远变不了了呀?哎,这会儿你得记得啊,嗯,好了,来,那打开打开咱们现在写的这个啊,扩展的这个这走。
21:16
哎,顺着咱们刚才那个往下写啊同学,我得提前准备好一个状态,那这个状态呢,用于标识着什么呢?来写好了用于标识。子组件。是否产生错误,哎,如果你的子组件产生错误,啥也别说了,就带着错误就掉它了,一调它就返回一个对象,这个对象就直接更新了状态,你说对吧,同学,哎,那所以说这里边儿,哎就知道我到底犯没犯错,所以说这个child的组件在这个位置你不要直接写了,兄弟,你是不是得判断一下this.state.has AR你有错误吗?哎哟,如果你有错误呀,那怎么办呢?写好了HR标题对吧,让它稍微大一点HR啊,这应该是这么一个杠对吧,来说吧,咋咋说呢,如果有错误,哎,同学你就那么实在吗?你说组件出错请联系管理员,不对。
22:15
啊,你可以这么说,你比如说当前网络不稳定啊,稍后再试,对吧,先稳住用户,好,那这是有错误,我想问的是没错误怎么办呀?没错误啊,你说是不是就正常渲染你的child的就可以了呀,是吧?哎,同学捋一下怎么回事儿,所谓的错误边界就是想把错误控制在一定范围之内,不要说谁容易犯错误,你就找谁去,比如说他容易犯错误,你找他副组件去找parent,在这里边写这么一个钩子啊,如果发生问题,OK,我能帮你调,而且传错误,而且呢,你得返回一个状态对象,更新你自己parent的状态,然后在你渲染子组件的位置再进行一个判断就可以了,好,回到页面刷新看一下效果来走。
23:05
啊,我没启动是吧,刚才切换了一下,然后呢,它就关掉了,那我就启动一下呗。稍等啊。好嘞,原来的呢,我就关了啊,然后呢,控制台我也给大家准备好,你看一下是不是这么回事儿,同学你仔细看啊,我给你卡一下,我这画笔一开启呢,页面就冻结来刷新走,同学看没看到当前网络不稳定,稍后再试,但是你过了一小会儿呗儿,它是不是还是报错呀?啊,咱先别管这问题,看看输没输出错误啊,其实那个错误的输出呢,就在这儿了,这就是它输出的错误啊this.state.user map is not a function。说老师是吗?那我们验证一下,在这个错误的前方啊,我加几个艾符逗号啊艾符诶。I,好了,保存,回到这儿刷新。好了,往这儿看,是不是它输出的错误呀,哎,是的是的,但是同学无济于事,你觉没觉得一瞬间哎,它是好用的,但是马上又完蛋了,是吧,老师你这是什么错误边界呢?那我说一下啊,同学,这个错误边界呀,只适用于生产环境。
24:18
你的开发环境是不能够使用错误边界的,或者说呢,你能用那么一下,但是马上他得告诉程序员兄弟,我还是得告诉你,你这会儿出问题了,如果你现在把这个项目经过一次build打包,那这个错误边界就起作用了,好,我把build呢删掉,好我重新build一下啊各位走n PM wrong build。执行一下啊,稍等。稍等啊稍等他正在打包。好了,OK,完事了是吧,那build是不是出现了呀?好各位,接下来呢,我开始执行serve空格,是不是build呀,回车这时候你注意。
25:05
5000这台服务器是不是开启了,按住CTRL键点开同学,你看非常稳啊,非常稳,当前网络不稳定,稍后再试,其实我们心里明白是你那个组件是不是出错了呀?哎,你看这就是错误边界,不至于由一个心里的组件,什么叫芯里的组件,就一层套一层,一层套一层,如果你不做任何的错误边界处理,就这个小芯儿,如果发生问题了,那整个错误都开始扩散个的这个应用全都起不来,对不对?哎,所以说错误边界呢,我们是有必要做一下的啊,那我们还可以做得更好,各位还可以做得更好,你就记着啊,错误边界呢,始终去找出错误那个组件的副组件去处理的好,我们还可以写一个,这个同学叫做什么呢?Component data catch。同学,我们学过component data amount对不对?Data amount啥意思呀,就是组件挂载了,那我问各位,Component data catch是什么意思呀?哎,说一下同学,这个呀,其实也是一个,也是属于生命周期钩子里的一个啊,但是不常见,什么时候掉它呢?跟大家说一下,就是说如果你组件在渲染的整个过程当中,由于你的子组件出现了问题,引发了一些错误,那就会掉这个东西,哎,那就会掉它,你在这个里边呢,你可以consolo,你可以说一下啊,叫做组件啊,或者说渲染呢,这个组件时,哎出错对吧?哎出错。
26:36
出错好,那你看一下啊,我加上它,然后呢,那我就得这样了,停掉这个重新呢,再来一次run build,但是这样吧,我在前边儿呢,给它加几个,这个也不用加了,反正这个中文大家都能看见是吧,Nbm run build稍等。再打包一次。商量。
27:03
好了,完事儿了,那就是serve build回车,诶打开啊走是这是这么展示的,主要看控制台刷新一下,各位你看这儿,哎,你看这儿我不用加啥标识符了,这汉字大家都能看到吗?是不是渲染组件时出错呀,那同学我们一般在这个钩子里边干嘛呢?那我说一下啊同学一般来说呀,做统计啊,统计错误次数,诶然后发送给后台是吧?你比如说同学你这个东西上线了,在一天之内啊,这个东西啊走了好多次,频繁的发给后台,服务器告诉一声,哎,说那块不对了,那你说发送给后台干嘛呢?发送给后台啊,或者说反馈给反馈给谁呢?服务器啊用于呢?哎用于怎么办?哎,通知这个编码人员进行什么呢?哎,这个bug的解决,你就比如说同学,我跟你说一个。
28:03
完整的逻辑啊,就有一天啊,你用着用着用着短服务器就崩溃了,返回的数据就不是正常的这些了,返回的是一个字符串,或者是一个违规的东西,那你看由于你用了错误边界,嗯,错误是不是就限制在了这个区域,不会再扩散了,与此同时我问各位,你说这个钩子是不是处发了呀,一处发是不是就统计错误是吧?哎,此处统计错误啊,你统计错误你再反馈给服务器,服务器呢,再做一个自动化的处理,服务器如果发现诶这报错了,就直接给那个编码人员发个短信对吧?哎,或者是发个邮件对吧,或者说呢,服务器只是说啊行,我知道了,服务器有一个敏感的这个阈值,你比如说每天当这个东西掉超过30次以上可能,诶,是不是意味着你这就有点不太对了呀,那赶紧通知编码人员进行bug的解决就可以了,这就是我们说的什么呢?错误边界,一句话,同学想把错误限制在一定的范。
29:03
而且还想捕获这个错误,而且还想把这个错误做出后台的反馈,这就是错误边界,回到我们的总结里边来,同学得用这个东西对吧?然后呢,还得用这个东西,其实如果你之前理解好了,Get derived state from props,那么理解它就也不难了。嗯,这就是错误边界来,特点就是只能捕获什么呢?后代组件,生命周期产生的错误,注意同学,这是一个重点,能捕获什么呀?生命周期产生的错误,别人的错误行吗?不行,这咱得说好了啊,回到这儿来,同学,咱们再演示一下,你在子组件里边,刚才是不是在render里犯的错,哎,那你看吧,同学,我问一下render属不属于生命周期函数,那必须属于,那你看着啊,各位如果呢,我这样做啊,我把这注掉,你说这么写生命周期是不是就没问题呀?哎,但是我这么做,你瞧着,你比如说呢,我定义一个函数,这个函数呢,叫做DEMO,哎,叫做DEMO走。
30:09
是吧,然后这个DEMO函数是不是得触发调用啊,那可以啊,我在这个render里面去触发一下this.demo this点诶this点这个DEMO是不是调DEMO了,如果你在DEMO里边你调test,你要是这样的话,同学是不是test是不存在的呀,那你这样的话就不行啊,只能处理,只能处理这个生命周期里边产生的错误,或者说你可以这样试一下各位啊,怎么写呢?你在这儿就直接写一个函数的调用,哎,就在这直接写你比如说test小括号,哎,你这么写肯定就不行,同学这个test是不是没在生命周期里边,哎,那他就捕获不到啊,我们一般啊同学都是想捕获哪儿呢?其实咱简单说啊,各位其实就是想捕获render的时候出的问题,你说对吧,各位,是不就是render的时候才容易出现问题吗?哎,回到我们的总结里边啊,不能捕获自己组件产生的错误和其他,比如说合成事件呀,定时器中的。
31:09
错误啊,这玩意儿都不行啊,这玩意儿都不行,哎,所以说只能捕获生命周期的啊,你不要觉得它挺局限,这设计的已经不错了,对不对?哎,好了,注意几个词儿吧,一自己的不行,得是后代的对不对?二得是生命周期产生的错误对不对?需要谁和谁的配合呢?他俩其实如果没有这个是不是也行啊,那如果有这个是不是更好啊,统计错误的次数,发送请求到后台,让服务器做出一个反馈,好,那这小节呢,我们停一下。
我来说两句