00:00
这节课我们来优化一下电影搜索的这个案例,有这么几个地方需要优化,一开始在进入这个页面的时候,应该有一个欢迎语,就是说请输入这个关键字进行搜索啊,一个提示语句,接着我们在输入这关键字之后,点击这个搜索,那应该有一个,呃,搜索中的一个状态,一个loading,一个转圈的一个状态,包括这个按钮,它也应该是一个转圈中的一个按钮啊,这是搜索中的啊,当我们搜索出现错误的时候,应该把错误信息展示到这里,诶这个之前在说这个静态组件的时候,哎,因为都是我们写好的,已经给大家展示过了啊,但是现在需要啊,对它进行一些处理,那我们先想几个问题啊,搜索数据是在这个search组件中,而我们要展示的内容都是在这个历史的这个组件中,所以还是需要去借助这个他们共有的一个副组件APP组件去进行完成,对吧。啊,这是这两个啊,那我们在这个里面去进行数据的一些搜索啊,但是状态的显示,还有数据显示都是在这个历史的组件中,对吧?那这个兄弟组件之间呢,暂时还没有办法去交互,所以我们还要再借助他们最外层的这个APP组件进行交互啊,就是他的这个数据的一些啊,查询的一些结果反馈到这个APP这个副组件啊之后呢,这个APP组件再传递给这个历史组件来进行这么一个交互。
01:19
来接下来我们就开始去写,那既然要借助于这个副组件,是不是这些需要的状态,我们要定义到这个副组件app.gs里面找一下啊,那现在指定一个这个Mo状态肯定就不够了,那我们还要去初始化其他的一个状态啊,把这个。展开写一下啊,Is first,哎,是否第一次?嗯,那目一开始的话,它应该是个处对吧,那是第一次去打开,当我们搜索完数据之后,哎,点了搜索再把它改为false,就是后面就不是第一次了,对不对,还有一个is。Loading,哎。是不是搜索中那一开始进来的时候,初始化的时候,那肯定是false,就是没有没有搜索呢?啊,只有我们点了这个搜索之后,才把它改成这个处是搜索中的一个状态,但是当我们数据搜索完成啊,不管是有没有结果或者请求出错啊,怎么回事,只要我们的请求结束,那它的状态就该改成false啊,就不是处于搜索中了,好,还应该有一个啊变量来存储我们的错误信息,对吧?那既然是错误信息是用来展示的,所以它是一个呃字符串就可以了,好需要这么几个数据啊。
02:27
那接着呢,呃。就是在这个search里面,随着它的这个数据啊,它的请求发生了一个变化,我们要去改变他们这三个啊,这个状态对不对,改变这三个状态,呃,然后我们又说过我们的状态定义在哪里,那么操作状态的方法就在哪里,那是不是我们可能要啊写这么几个方法,哎,更新这个啊是不是啊,第一次加载的啊,更新这个是不是加载中的啊,接着更新是不是这个error的出现错误的,哎,是不是要写很多对不对啊啊这样的话就比较麻烦,那不仅要写很多,我们。
03:00
还要去在这里面去一个一个的去改,他们的这个状态是不是比较复杂,对不对,所以哎,我们怎么办。我们进行整合一下啊,就是啊整合成一个方法,那要不然的话,你不仅要定义这么多方法,你还要给它传这么多方法,是比较麻烦,好怎么改呢?我们改这个方法,把它改成什么,改成呃upate啊更新谁更新appsate,哎,就是说这个方法呢,是用来更新APP组件的这个状态的,对吧?那这里我就不仅要这个电影的数据啊,我要什么,我直接就要一个要一个对象啊跑进,那这个对象呢,就是你要出始更改的这个状态。我们可以在这里,呃,给大家稍微举个例子,比如你这个奥BD是这个啊。摸哎,那说明你可能就是要。改这个move对不对,那如果你的这个OBD啊,是这个is first,还带了这个is first,那你可能还要去更改这个is first,是这样的啊,那就是说我们把这个方法去传到色系这个组件里面,那你色系组件你给我传什么对象,我就给你更新什么对象的一个状态啊,是这么回事啊,大家要理解啊。
04:12
呃,我把它写成space obg吧,啊,一个状态对象啊,那这里就不加这个括号了,直接就是更新,哎,你给我什么,我给你更新什么。这样的话,我就把这个方法直接传到这个里面就可以了,是吧,好接着我去这个组件里面。把这个。调用到这里改改好,我们先拿哎这个之前写好的这个例子进行一个更改,那这里我就不是直接把数据给你了,我要给谁给你个对象是不是,哎给你一个Mo Mo你的数据是谁是他对吧?那我这个对象给到你这个方法之后,这个方法他就会收到啊这么一个对象之后,就直接哎会把它的这个状态给更改掉,哎这种事大家能明明白是吧?啊就是我们啊直接把要更改的。啊,这个状态给返回了,传到这个方法里面,好先试一下啊。
05:03
来看看是在运行中啊。把它置点。接着去浏览器中,我们看一下效果是不是一样的啊,刷新啊。呃,随便搜索一个啊,搜索一个啊,你好。哎,可以看到啊,是不是能搜的出来是对的啊,没问题啊,那接着。就开始去处理这些状态了,对吧,啊处理这些状态,哎,这时候我们就来看一看。嗯,在你开始发起这个请求之前啊,我要先把谁给改了。哎。修改状态啊。修改其他状态。好,在发起这个请求之前,我要先把谁给改了呢?要把这个first is first给改了,Is。First,他不是第一次了吧?是不是?
06:00
因为你已经哎点了这个搜索,所以就不是第一次我把它改成false对吧,那接着呢,呃,还要改谁是不是这个一个意思。Loading。是true,是不是因为我点了这个搜索,所以现在这个一直loading,它是属于这个搜索中的一个状态,是这样的吧,好,那接着啊,接着看这里啊,当我数据哎请求完成的时候。我不仅得到了这个电影的这个数据,而且还要干什么,还要把这个is loading。给改成first,因为已经搜索结束了,它这个就呃不是搜索中的一个状态了啊接着啊,这个错误呢,同样的啊,那我就不是在这conslo了,哎,我是干什么呢,调用这个方法啊,调用这个方法呢。把这个。Is loading。首先是哎,除。就是改成for啊,这刚才说反了,For就不是搜索中了啊。啊,Loading,那肯定是first,就是说已经搜索结束了,那这个就不是去写这个movie了,而是写谁是写这个error,我们要给这个error去。
07:05
哎。添上这个数据啊,给这个error,把它状态给修改一下啊,这个是这个error,哎,这样我们就完成了啊,一个是搜索之前,我们把这个in first改成嗯,First和loading改成true,那搜索完成之后,不管你是啊发生了错误还是说哎请求成功,我都把什么呢?把这个is loading给改成first,因为已经结束了,对吧,你不是这个搜索中了啊,但是有不一样的地方,就说我如果请求成功,我拿到的是电影数据啊,我就把数据给你。啊,这个状态修改了,那如果我出现了错误,哎,我是把你的这个错误信息啊,这个状态给更改了,好接下来呢,我们先看一看这几个状态会不会发生更改啊,先不去写这个例子,那怎么看呢?借助于我们的这个。插这啊好,我把它给。啊,横着放那找到这个。Component我们这个react的开发组件啊,来刷新一下啊。
08:01
好,首先看一下呃,APP组件,哎,我们状态是在这个APP这个组件里面定义的啊,是不是有这么几个状态看到了吗?啊把这个关了啊,是不是有这几个状态,I是空,然后is first是true is load loading是first是吧?然后move是个空,好接下来我来搜索一个东西啊,搜索你好。来,现在我点击搜索可以看到啊,Is first是不是变成了这个first,而如果大家细心的话,你会发现这个is loading一开始它会改成了数,接着去变成了这个first啊,然后电影数据也回来了,是吧?那你们可以注意一下这个is loading啊,注意一下这个is loading,那我再点你们看一下它是不是先变成了true,再变成了first。看到了吧,啊,它先变成了出,再变成了这个for。因为这个啊,开发者工具就是这个react啊,我们这个开发者工具啊,它有时候去显示这个,它的速度会会慢一些,所以有时候你点了之后没有反应的话呢。可以稍微多尝试几次啊,但是这个间隔就说不要点的太快了,点的太快的话,这个API就给你限制,就不让你请求了啊,又要等很久才能继续访问啊,这点先说到这里啊。
09:12
那接下来我给大家去演示一下这个错误的这个情况,那错误的情况怎么演示呢?比较好演示啊,你随便请求一个不存在的一个地址,比如说MA222是不是这个不存在吧,那你这时候你再去。刷新来请求注意这几个状态啊。来,我随便去搜一个A。可以看到,哎,是不是出现错误了对吧,那我们看到这个错误信息对不对,因为你请求的这个地址不存在啊,所以就报错了,那这个错误信息我们先放着咱们来说啊。接着哎,我们已经看过了啊,这些状态都是呃,可以去更改的啊,我们也通过这个啊优化把这个方法优化成了一个,哎,你给我什么更新成什么,避免了是一个一个的去写啊,更新这些状态的这些方法。那接下来干什么?是不是要使用这些数据啊?
10:01
你现在你只是啊定义了这些状态对吧,去修改这个状态的这个值,但是你并没有使用啊,我们要在哪里使用,在这个历史的组件里面去使用,对不对?好,那这个状态是在谁?在这个APP这个副组件里面,如果要让list里面去使用,我是不是要,哎,通过这个purpose传递过去就可以了,对吧,大家可以看到啊,现在有三个,那我是不是要。再写三个是比较麻烦啊,那我是不是可以直接在这里。点点点this点啊。整个啊,把这些都传给这个list是不是就可以了?好,接下来呢,在这个list里面,我就可以从purpose里面去拿到这些数据啊,来打开这个list。来这里啊。好,这里呢,呃,之前呢,我只是啊把这个voice给解构出来,现在我还需要其他数据,是不是继续解构啊,Is这个first啊,Is loading对吧,还有一个这个error,我是把这几个都给以解决出来,哎,接着怎么办?我不是要判断哎,如果你是第一次的话,那就不显示这个电影数据了,因为你第一次的话,它是空数组,它就没有数据嘛,要显示谁显示这里我们准备的这个,哎,请输入关键字显示它,对吧。
11:15
啊。然后啊,如果哎,你出现了这个啊,错误显示它对吧,然后如果是搜索中显示它,然后是哎,找不到数据啊,就显示它。可以吧,那找不到数据未找的资源,所以这个比较好处理,那如果返回给我们一个空数组,是不是就没有它啊,也就是说我们要在这里面去写这个判断对不对,在这里面去写这个if啊,但是之前我们讲过这个问题,你在这个GS差里面,你你不能写这个if判断呀。对吧,你不能写这个,这个判断语句,是不是你只能写什么表达式啊,这时候怎么办?是不是可以写这个,哎,三元运算符哎,Is。First。哎,你是第一次吗?对吧,是第一次哎,我给你显示什么什么,哎,否则的话,我就给你显示这些是不是,但是你如果使用这个三运算符,还有其他的判断呢,比如说是不是这个搜索中啊,是不是有错误啊,那这怎么办?
12:10
很简单呀,你三元运算符你连着写吗?你这里判断了is,哎,是不是第一次之后,那你在这里,哎,接着判断。在下一个三运算符接着判断,哎,Is loading是不是加载中,那你如果加载中怎么办啊,你显示这个加载中的这个。加载中的这个代码,否则的话继续选择它是不是,那接着往下判断,哎,比如说啊这个嗯,Error。就说这个艾,哎,是不是存在错误,存在错误给你显示错误,哎,否则的话呢,哎,直到最后。啊,就是说你既不是第一次啊,也没有加载中,也没有错误,那什么这时候电影数据可能就有了是吧?啊但是呢,嗯。还有一种情况就是说,诶,我是拿到了这个电影数据,但是我搜索的这个关键字啊,啊没有查到电影,就是它的长度是一个。空。
13:00
对不对,好,这时候你可以再写一个啊,三元运算符,就是说你判断它的这个长度啊,点子是不是等于零嘛,对吧。讲认识。等等于零吗?哎,如果等等于零,那说明就是啊,没有对吧。说没有没有找到电影,那我们这里面应该显示谁显示这个未找到资源是不是好,当然我现在呃,都是用这个空格给给表示了啊,其实应该替换上这些对应的这个内容。是不是好,那我们开始换填充啊,是不是第一次啊,如果是第一次的话,我应该显示这个内容,对吧,显示这个啊。最外层的这个呃,Div我不想要了,我等会把这些class啊,这些属性我给到他就可以了。那这个就不要引号了,GSX嘛,那把它改成class name。然后我把这几个样式。给到他啊。
14:00
好,我们先来看一下这个样式有没有问题啊。诶,没有问题是吧,请输入关键字搜索电影对不对。来同样的,那如果是加载中呢,加载中呢,我要显示谁显示这个东西。不要单引号啊,我们这个是GS叉,然后同样的把这个class。Name给改了啊,把这个样式我也给它复制一份啊。再试一下它好不好使啊?第一次啊,输入关键字搜索电影啊,之后呢,我去搜索这个电影。啊,当然这个样式乱了啊,所所以说呃,这个样式我不能直接给他,我应该还是在它外面给它包裹一层这个才行。啊,因为它是一个loading的,是一个这个图标啊,我再给它包裹一层这个。这个有点特殊啊。来,再加一个结束的div。
15:01
啊,因为它不像这个H标签H5标签对吧,直接就呃给它呃设置一些属性让它居中就可以了,文字居中啊这个呢,它是一个呃标签,所以外面啊是一个这个loading的一个图标嘛,所以我要给它外面包裹一层啊。那这时候我们再来看一下。好,接着。嗯,第一次进来正常的啊,输入关键字搜索电影来,接着我开始搜索之后,是不是有这个loading来,搜索完成之后loading消失了,对吧?好,这个也没问题啊。啊,就这个loading这个图标需要注意一下啊,需要多给它包裹一层外面这个啊,其他的像这个H5的话,这些就不用了啊。来这个啊,这个是跟这个是一样的,就字不一样,我直接就复制这个了啊。就是什么什么什么跟他是一样的呢,就是。啊当啊搜索不到电影的时候,哎,它是一样的啊。来,我把这个文字复制一下,改一下。
16:06
接着处理一下这个错误的,这个情况错误呢啊,我只是换了一下字体的颜色,让它显示成这个红色,其实呢啊,还可以直接用这个啊,那我直接粘贴。诶,不是是粘贴这个H5啊。整体一下。把字体颜色换一换,诶换成这个红色。好,那这个就不是啊,我们自己去写这个内容,而是谁你当你出错了,我就直接给你显示这个错误的一个原因对不对,所以我直接啊,在这把这个error给写上就可以了啊。好,把这个艾给写上就可以了。来,接下来我们来试一下啊。呃,先试这个这个这个找不到电影的一个情况啊,先试第一次吧,第一次这个肯定好使对吧,那我搜索来搜索。
17:03
哎,Loading也好使对吧。然后接着我去搜索这个东西,应该会找不着这个电影啊,找不着是不是未来的资源,那接着我们来看一下最后一个错误的一个情况,错误的一个情况还是要改一下这个地址啊,把它给改成比如说222,那找不到这个地址呢,它就会报错。这时候我们来看看这个错的一个情况,诶。可以下发现已经报错了啊,之前其实我们见过这个错误,他说什么,他说你这个啊对象你不能啊,作为一个这个react的一个一个节点去进行渲染,那为什么呢?你来看一看。之前我们这个这个先把它改对啊。先把这里吧,这里我先给它删掉啊,删掉之后我让大家看一看这个错误,它是什么一个数据类型。来刷新啊。好。啊,随便去搜索吧,他肯定会。
18:01
啊,报错了,你看一下这个艾是不是它是一个对象啊,对吧,你不能把这个对象你作为这个的节点给放到页面对吧?但实际上我们是只是要它错误信息,找找错心在谁里面。这里没有显示啊,那实际上呢,是啊在这里。我们先把它撤回啊,撤销一下,先把它错误显示在这啊,实际上呃,在这个error,它这个里面,它有一个message。他会把这个错误信息呢,就是说我们请求的信息放到这个message里面啊,这时候我们再来试一下啊。呃,历史组件里面这个错误已经刚才撤销了,已经显示了正常显示对吧?好接着再来看一看。刷新。来搜索啊,随便搜索吧,反正他都会报错是不是。好,是不是这里已经用错误信息了,嗯,我把这个再小一点。对吧,404,诶这个就是。这个错误信息它返回的啊这个。这个era它是一个对象啊,你对象你直接往这个react啊,这个节点里面去去渲染,肯定会报错是不是,那我们把它的这个啊message消息啊,就是说他请求的这个消息给。
19:13
返回给他就可以了,那它是一个字符串,你字符串就可以显示到这里面,好,那这样的优化我们就优化完成了啊。接着来看一下,我们把这个地址给改对啊,让他能正常的去搜索到电影,这里改对之后呢,嗯,先看一看,还有什么可以优化的一个地方啊,刷新一下啊,这里我去让它小一点啊,搜索电影搜索你好。搜索到这个电影之后啊。大家会发现我们点击这个搜索的时候啊,这里是有这个loading,但是这个按钮并没有发生变化,我们之前给大家演示这个静态页面的时候,是不是当我点击搜索这个按钮,它也是处于一个呃,转圈的一个状态。啊,这时候哎,我们来想一想啊,这个按钮是在谁,在这个search这个组件里面,所以说search组件也需要这个is loading的这么一个状态。
20:03
是不是这样的好?来。在这里啊。app.js我要把谁呢把。这个is loading给传过去。一直漏电,然后在这个设计组件里面。嗯,那这里我就要去用到这个is漏点。从this.prop里面去结构出来这个is loading之后,那要判断的是谁,是不是显示这个按钮,或者显示这个按钮,哎,是不是这样的啊。来,我们先把这个注释给打开。注意啊,我们不能去在这个里面去写这个一负判断,还是要用到这个三元运算符,我们判断谁判断这个is loading你是不是加载中啊,加载中呢,加载中的话要显示谁显示这个加载中的这个按钮。
21:02
是这样的吧啊,否则就显示谁。把这个冒号给它分开啊。否则是不是就显示它。是不是这样的啊。这个结构呢?给大家稍微整理一下这个换行。就这样吧啊。来判断这个is loading,如果你是加载中,那就显示啊这块的一个内容,好,如果你不是加载中,就显示这块内容来注意啊,这个点击进行搜索这个事件我给到他啊,那这个我就不给了,那这个应该是搜索中啊加个大家点这个我就不给了啊,因为我们其实为什么要去判断这个按钮呢?就是啊怕有些人,哎,明明数据已经在搜索中了,他还要再点点,哎我们就这个就不给时间,让你点了也没有用,哎这是对我们这个呃数据啊,对我们的这个请求是进行一个频率的一个限制。
22:00
这些细节大家啊,一定要在写项目的时候要注意到啊,尤其是像这种发起这种网络请求的,一旦他已经发起的这个网络请求,因为有些数据可能会要一定的时间啊,需要一定时间或者说啊几秒。都有可能啊,你不能在这个数据啊处理过程中,再让用户来回的去点这个按钮,所以一般我们会。啊,把这个按钮给变成一个搜索中的一个状态,就不让他点了,你看我现在没给事件对吧,点了也没有用,接着我们来看一看这个效果啊,好不好使啊。小心眼。来输入这个你好,现在我点这个搜索。哎,当然速度比较快,他可能一闪啊就而逝。对吧。好,那说明这个判断没有问题啊啊。这样啊,优化到这里啊,才是真正的算是完成啊。啊,这有个冒号,如果你感觉这个冒号感觉不是看得太清的话,我把它给单独占一行啊,它是属于啊这个三元运算符的这个结构啊,就是说显示这一部分还是显示这一部分。
23:00
好,那么呃,这里我们就先优化到这里。
我来说两句