00:00
好了,各位完善一下这个案例啊,目前有什么问题呢?首先一上来你就没有一个欢迎词,对吧?回到课件里边,你看人家那动态图一上来是不是有欢迎词,哎,好,你没有这个,然后再分析搜索东西的时候,你比如说搜索一个人点击搜索,哎,就这个空档期,是不是应该给他展示一个loading稳住一下,用户说我正在加载中,对吧?啊是它最终是出来了,但是体验不太好啊,对吧?啊,同学回到呢,课件里边给我们准备好的动态图这个红色区域啊同学们是不是list组件对吧?哎,是list组件,同学,我想问你的是,这个list组件都能展示什么东西呢?它有几种展示呢?你可能说老师那不废话吗?那肯定第一个展示的就是一堆用户的信息,U点斯啊,确实它都能叫list组件,那也就意味着这个组件命名的时候,其实我就本意想展示一堆用户的列表,对吗?但是同学你想展示就展示啊,有的时候可能会出问题的,你比如说这块不能说只展示用户列表,同学就现在这种情况,你说的展示啥了?现在这种情况它展示啥了?是不是一个,哎,欢迎页面呢,我写这么一个词叫first,啥意思呢?就是你第一次上来,它是不是得给你一个欢迎提示,哎,那你告诉我同学,你说这还能展示啥呢,就list区域啊,除了展示用户列表,除了哎first第一次上来那个欢迎词,你说还有可能展示啥呢,是不是。
01:31
Loading啊,嗯,你觉得呢,搜索的过程当中,这没展示过loading吗?说老师那也差不多了吧,也就这三个了吧,不不不,同学,我们的这个GIF啊,这个动态图呢,没有展示出来的,就是如果github服务器崩溃了怎么办,如果请求失败了怎么办?所以说同学你还得展示另外一个人,就是容易被大家忽略的ER2啊,就是错误信息,所以说同学你品一品你的list子组件,光是展示一个用户列表那么简单吗?不是还有初次渲染的欢迎词,搜索过程中的loading以及出错的错误信息,对吗?哎,那所以说同学也就意味着list展示的东西它一会儿一变。
02:19
根据你请求的结果,根据你所处的目前的这个场景,List要给你展示不同的东西,那同学list要展示不同的东西,咱们一再强调状态中的数据驱动着页面的展示,所以说同学你想让list有这四种不同的展示,那你是不是得有四种不同的状态数据去控制它呀?啊,那回到代码当中走吧,来到APP,同学初始化状态的时候,光写个user够用吗?不够用,哎,就不够用了,来把注释拿走啊,这块确实叫初始化状态啊,但是这个user初始值为数组,那就得放在这儿了,对吗?同学,那你说说吧,你都得需要什么标识呢?首先需要第一个is first啥意思?用于标识该应用或者该网页是否为第一次打开,也就是第一次打开啥意思?第一次打开就是你刚打开连搜索都没搜索呢,对不好,那。
03:19
你说一上来呢戳啥意思啊?哎,是否为第一次打开页面?好,那除了有它也不够,还得有一个人is loading,我为啥非得加个is呢?想让大家看的更看的更明白一点啊,Is loading同学一上来就加载中啊同学你说这个is loading啊,是不是得发送请求前你把loading调为true,让用户去看这个loading,一旦数据回来了,A loading是不是得调成false,不让他再看这个loading了呀?所以说一上来同学你还没法请求呢啊,它得是false,不能一上来就loading啊,对吧?好,那叫做标识是否处于加载中,那还差一个啥呢?ER,哎,那这就是错误信息,那一上来有错误信息吗?我我连请求都没发,我何谈错误呢?哎,所以说。
04:19
这块就是啊,存储错误信息啊,应该这么说,存储请求相关的错误信息,你代码写错了,那肯定不能往里存,对不对啊请求相关的错误信息来吧,那所以说同学我问你哈,你说你光有一个save user够用吗?咱就拿search组件来说,同学search组件比如说有一个动作,蓝色的动作叫搜索。啊,蓝色框我在执行搜索,那你觉不觉得你需要在搜索前。把it first调成false,你都已经点击搜索了,它肯定不是第一次展示了,对吧?啊,一会儿数据都回来了呀,还有就是搜索前你觉不觉得你应该把a loading也调为true,啥意思啊,你先去给用户展示loading吧,完我这边呢,去请求数据,那我什么时候不展示loading啊,你听我信儿吧,是吧,我什么时候数据回来了,我告诉你is loading为false,你再不展示对吗?好。
05:22
那你说发请求之后呢?怎么办?这个is first我问大家,只要你但凡你点了一下搜索is first是不是永远变成false了,因为is first标识的就是否第一次打开页面对不对啊,好,那你说如果搜索完了呢,A loading是不是就得重新调为false,因为你在这一步不是调成错了让用户看吗?那你这调成false就得不让用户看对不对啊,还有就是同学,如果你蓝色这个区域,万一搜索的时候出现问题了,那咋办?你还得更新状态,你得把错误信息存在ER里,那就意味着你接下来要写这种这种东西啊,很多,不仅有save user,还得有save is first,或者我们叫做change,对吧,改变吗?Change first,再来叫change is loading。
06:13
对吧,再来啊,不叫change了,叫做save,保存啥呢?ER,那你觉不觉得啊,同学,你应该把这些东西,就这些东西全都得传给list啊,传给search啊,传给search,你说对吗?搜索前我得改变这个,改变这个搜索后,我得改变这个,改变这个搜索后,搜索后怎么办,还得存储,用户搜索后还得怎么办,万一有错误还得存储错误,那你觉不觉得同学你要把四个东西都传进去啊,而且呢,你觉不觉得这四个东西里边其实都在操作状态呀,没干别的事儿对吧?那所以说呢,同学我这么设计,你瞧一下啊,我不叫save,这save,那同学这里边有十个,你还写十个方法递过去,所以说呢,我不这么写了,我这也不叫做save user了,我让他写的更有通用性一些啊,更加有通用性update APP。
07:09
State,你就听这名啥意思,更新APP的状态,我需要的是你就直接给我一个状态OJ,直接就给我一个状态对象。然后在这里边呢,我也不用自己再写对象了,同学,This side state,我问你是不是得传一个对象吧,你告诉我是不是得传一个对象,但是我不用自己写了,我接到的本身就是一个状态对象,直接一写是不是就可以?好,那这写好叫做更新APP的state对吗?好。来同学,那你注意看啊,我这方法就得给谁了,Search对吧?好了,回到search里边啊,不叫update,不叫save user,用save user太局限了啊,用这个update APP state来到设置当中走同学那再分析,那你说刚才你请求成功所调的那个save user是不是就不能再用了呀?但是你别急,咱慢慢捋一下啊,同学,你获取完用户输入之后,马上是不是要发送网络请求了?
08:12
那你在发送网络请求之前,你觉得你应该干嘛呢?this.props.update APP state是不得调用,哎,那写好处是我第十行代码在干嘛?发送请求前通知APP更新状态,为啥要更新状态?更新哪个状态要求?你是不是得写一个状态对象写呀?啊,必须得把is first调成false,因为你已经开始点击搜索了,已经不是初次的欢迎了,对吗?而且还得把is loading调为true,啥意思?哥们儿,我要发请求了。一旦数据回来了,那我问大家是不是还得通知APP更新状态,那这得怎么说呢?叫做请求成功后通知APP更新状态。
09:17
A first调为false以后就不用再管了,毕竟呢,它已经不是第一次展示了,那a loading马上得给人家调为是不是false,然后嘞,User不存呢,是不是得存在哪呢?response.date.it,对吗?好。那你说如果出错了怎么办呀?来吧,这儿咱也有事可做了,是吧?哎,叫请求来写好,失败后通知APP更新状态,同学,请求成功了和请求失败了是不是都算请求有结果了?有结果了就别在这展示a loading了,就得把a loading调为false对吧?但是你是失败了,你是没有users这个属性的,你就得往这个里边叫E,往里边存东西,那值是多少呢?
10:12
你可以直接写叫请求出错啊请求出错,那当然你可以写的更好一点,就把这个错误呢,真正的给它放在这儿,那告诉人家你真是有错误了,对吧,好保存,那这回呢,我们试一下啊来走说老师一上来也没有啊,你这不说的吗?PA is first1上来为错同学,你这四个东西是维护好了,但是我想问你的是,你的list里边有写那些代码吗?就根据这四个人我决定做不同的展示,您没写吧,所以说这样啊,我们先呢,借助开发者工具打开APP,你看啊,这APP呢,诶应该刷新一下啊,来出来了是吧,Is first is loading是吧,然后还有这个来,同学你看一上来这状态是不对,因为is first的调为处一会儿这呢,哎,是不是得展示那个欢迎的呀?来接下来看着我点击搜索,比如说哎,搜索一下。
11:12
我的名字,哎,没点的啊,一二三点走注意看,哎同学这个状态对吧,It first已经不是第一次了,目前处于loading状态,Loading没错啊,你等会儿数据回来了,同学也不是第一次是吧?哎,这个使用了,然后这呢也不在加载中了,Users是不是也回来了,哎,好同学,那咱们看看请求出错的时候他能怎么地呗,是吧,那怎么请求出错呢?非常简单,你把地址哪块随便改错一下是不是就行了呀,你比如说这改成234是吧,这是错的。啊,正常是user,那你看一下呗,刷新点开APP是在这儿呢,然后你输入123啊搜索等着同学你看错误信息是不是进去了,而且你注意观察同学,错误信息是一个什么东西啊嗯,错误信息是一个什么,是一个错误对象啊好,那回到这儿啊,赶紧把这个改对了,那接下来怎么办呀,你这东西辛辛苦苦维护好了,哎同学,如果你在APP里边维护好了这四个人,你却不传给list,你觉得那你写这些还有何用呢?
12:19
你写这些东西的目的是要传给list对不对?啊,说老师,那为什么我要写在APP里呢?说了吗?不写在APP,那search咱就说他怎么去操作呀,Search没有办法直接给list东西吗?说老师好烦啊,这兄弟之间怎么一直打不了交道呢?同学别急,讲完这个马上我就给你讲兄弟之间怎么打交道,特别爽,那一喊那一听就完事儿啊,慢慢来,同学,我问一下你光给例子传users够吗?不够用吧?哎,那咋办呢?你是不是得把这四个东西全都传过去,List根据它们不同的值决定展示什么对不对?所以说我想把state里的东西都传过去,老师,那就这样简单呀,你拿到users了是吧?老师你再拿到is first,那简单啊,你这就写呗,It first完了,等于这个,哎,那咋的,我这里边有十个,这接十个,这传十个呀,哎,来,怎么写,走,看着啊,点点点this.state啥意思,是不是批量传递啊?那这儿还要吗?不要了。
13:24
对吧?你有多少我传多少个是吧?传给list,那list能接到什么呢?Users is first is loading还有ER来到list里边,那这想想吧,是不是可以提前在上边准备好啊,我刚才在这是直接写的this.prop.users是吧?那这回咱提前给它取好,等于this pro来吧,都拿啥?User is first还有谁is loading还有谁ER2那这前面这些来省了省了省了都不要了users.map,对吧?同学,我问一下,你能写死就是这些东西吗?嗯,如果它出现错误,很有可能连users都没有,对吧?如果is first为true,你就得展示欢迎的页面,如果is loading为你就得展示loading的页面,对不对?所以说这呢,千万别写死同学,红色框里的代码什么时候才写?你有了users已经加载完毕了,是不是才展示这个呀,对吧?
14:24
同学,你仔细观察蓝色框里的东西是不是map方法调用啊,MAP1调用是不是有返回值,那返回值是不是就展示到这个位置了呢?但是我不是一直展示它呀,那你是不是得写判断呀,是吧,你得问他还说你这东西怎么怎么地是不?嗯说老师那怎么写呢?那我知道了,那判断吗?我得写if判断,哎,找同学,GS叉里边能写if判断吗?啊,If,那叫判断语句。对吧,同学啊,叫判断的这个语句不是表达式,咱得写表达式,那咋办呀?哎呀说老师那判断写不了衣服,那还能写下去了,哎呀能啊,看着是不是可以写三元表达式啊,问一下你是初次展示吗?他说我是,那咋办?
15:13
欢迎词儿啊写呀,欢迎词啊叫做输入关键字,随后点击搜索啊,或者说的再好听一点啊,欢迎使用对不对?好了啊同学说老师那三目或者三元,那后边还有别的呀,他说不是呢啊老师,那不是我就展示这一堆吧,那你觉得你这判断行吗?咋的loading不判断了,这不判断了呀,说老师,但是三元表达式它只能有两个呀,就行还是不行吗?为真为假吗?同学三元能连着写呀啊说如果你是it first展示这个,那不是呢?不是,我再问,我再问一下你是loading状态吗?哦,你要是loading状态,那OK啊,我给你展示loading对吧?啊,那你要不是loading的,那我再问呢,你有没有错误呀,对吧?那你要有错误,OK,那咋的,我就给你展示错误,但你这么写对吗?不对,你这么写就把ER给输出了,你得读取ER里的东西对不对啊,ER不是错误吗?那个东西读出来呀,说老师那你看啊,我不是第一次展示,我也不是loading,我还没有错误,那你肯定就是数据回来了吗?
16:24
是吧,你这顺序可以写的跟我不一样啊,你也可以自己去,哎随便写也是可以的,那么既然都是错误的同学,咱能不能在这写一个样式对不对?哎,写个color颜色呢,让它是red红色的对吧?啊,也就是说哎,三元表达式能连着写的啊来回到页面看效果直接出来了,一上来欢迎的,那你瞧对吧,欢迎使用输入关键字,随后点击搜索,那来试试吧,搜索我的名字,然后呢,点击搜索走,你看楼顶中等会。数据只要一回来loading就会消失,你看对吧,这才是一个正常的交互逻辑,但是呢,在这儿我给你埋下了一颗雷啊,那是时候呢,把这颗雷呢啊给它放出来了,来同学注意啊,刚才呢是没有错误对吧?哎,那我接下来呢,让这请求啊发生点错误,来到search这里边,我重新给users这呢加个234啊保存来为什么埋这雷呢?埋这雷是有意义的啊,你以后呢,在做开发的时候可能会遇到这些问题啊来我输入一个qwer,同学现在肯定搜索不能成功,因为路径不对是不是?哎,好了,点击搜索走,你报错了,同学来读一读这个错误,这个错误在我们讲react不能说第一天了是吧?哎,我们这视频呢是分小节录的,也就是在刚讲react的时候,我们在做GS前端框架列表的时候。同学们。
17:54
我们就说过这个事儿,你读他说什么呢?Object是不能够作为react的孩子的,这啥情况呀?啊,那说一下同学现在是不是发生错误了呀,一旦发生错误了,是不是走这儿啊同学你把啥存进去了,是不是错误对象,你把错误对象存进去了,你这却要直接展示这个对象在这儿,你觉得行吗?所以说不要存错误对象,知道不要存错误对象身上的一个属性叫做message,详细的错误信息,这回就可以了,来比如说输入123搜索,你看404。
18:30
也就是说你请求的东西不存在,这就没问题了,所以说这是我刚才给你埋下的一颗雷,来整体刷新一下,咱点一点啊,看看有没有什么bug,保存刷新啊,输入艾特硅谷,然后去搜索,这是刚上来欢迎的对不对,诶一点击走loading。等着哎,数据回来了,然后咱测试一下,点击这个人能不能跳到这个人的这个仓库啊是吧,你比如说点击这个啊走。稍等就来到了这个人的github,哎,个人仓库主页是吧,关掉好啊,说老师呢,这个东西没清空了,不想清空,因为如果你不清空的话,就标识着下边的这些内容是搜索谁搜索出来的,对不对?哎,好了,但这呢,多说一句,同学不要搜索中文,比如说上硅谷。
19:17
搜索loading。等着。说老师为什么不要搜索中文呢?哎,等等啊,你看现在一直都没有结果,哎,同学你看啊,它返回的什么呢?嗯,给你返回了空数组,说老师跟上硅谷相关的没有,同学你要注意啊,他拿这个东西他怎么检索呢?他看看有哪个用户的登录,登录名是上硅谷,同学们大家都知道github这个网站啊,登录名啊,它都是英文的,都是这种字母形式的,来同学你给我注册一个github账号,完了你登录的用户名是汉字的,你给我注册一个,我看看是吧,注册不了,所以说别搜中文,你搜中文的现在还好,他告诉你user没有东西,如果是之前的就报了一个错误,这其实就直接展示出来了啊,但是现在吧,反正他就是给你返回一个空数组,就尽量别这这么做,还有就是有些同学较真,老师,我搜个789,你看着搜索789,我搜的是不是789好等。
20:14
等啊,咱就说这事儿,同学,我问一下这跟789有啥关系吗?啊,你要说这个有关系我承认,哎,我问你这个跟789有啥关系吗?说老师这东西,同学这就不归咱管了,这就是他服务器检索的问题了,对不对,诶好嘞,同学,那我们就做完了这个小案例,那这小节呢,我们停一下。
我来说两句