00:00
好嘞,各位啊,刚刚那一小节啊,我们讲的是react-redu的一个基本使用是吧?哎,而且主要的逻辑核心的东西,同学们是不是都在这个容器组件里呢?是不是,哎,来打开这容器组件啊,咱看看,虽然这些代码啊,我得承认有很大的优化空间,你就比如说这家就叫家呀。啊,一会儿我们整体去优化它哈,我们给大家做一波总结,我们来到read me这个文档里边啊,咱把这个react-redu的基本使用给大家总结一下,那我提前敲好了,直接粘在这,我们过一遍啊同学,刚刚那个案例敲完了之后呢,你得学会了下边这些东西,首先知道了两个概念,UI组件和容器组件,对不对?UI只负责页面的呈现,不能用任何red的API,容器组件呢,负责跟Rex通信,你可以随意的去使用Rex相关的API。
01:04
啊,然后你把东西转交给UI就可以了,而且呢,这容器组件是靠程序员亲自自己去定义的吗?啊,用class关键字定义一个组件,不是是靠connect生成的对不对?那connect从哪来呀,从这来react杠。哎,而且这个connect使用的时候是先写一个小括号,再写一个小括号,对吧,那这写的是什么呀?UI组件,那前边传的这个这个是干嘛的呀?在这儿有说明。Map state to prop映射状态的,Mappa tos映射操作状态方法的,他们的返回值都是一个对象啊,那它们俩都是函数是吧?好,再看备注,值得你注意的是,容器组件中的star不是你自己亲自引入的,而是靠pros传进去的。
02:04
你比如说打开src,找到container。Container这个组件同学是不是左手是UI,右手是re,那就得引入左手边的,再引入右手边的,但是右手边的东西不要你亲自去引入,是不是在APP里边通过props传给容器的呀,这你一定要注意好了,诶,那我们就总结完毕了,那么折叠起来,我把这src呢复制一份,给它改个名,这是刚刚咱讲的第五个下划线,Src_react girl redu的基本使用啊,没讲优化呢,现在咱讲讲优化是吧?好,来打开这个代码,优化的地方啊有很多,我们一个一个来,我们先从哪儿着手呢?先从容器组件着手,看看能优化哪些东西啊,打开容器组件,打开。
03:03
我把所有的这个长的注释啊都删掉,因为在五里边已经把注释留给大家了啊,来这一堆删掉,这一堆删掉,我把这终端呢也给它隐藏,写一个精简版的注释走起,这叫做映射状态,那这叫做映射操作状态的方法。好。说老师那怎么优化呢,我们慢慢来啊,这东西全摆在这儿,所有的代码就这么多。同学,这两个东西能优化慢慢来,你觉得第一个能怎么优化呢?同学,我可以用一行就写完,就写成一个箭头函数对吗?那所以说写着。等于。箭头函数对吧?箭头函数的左侧只有一个参数,所以说删掉小括号箭头的右侧函数体只有一句,而且做了默认return的这个动作,而且return是不是一个对象呢?
04:12
那么根据之前咱跟大家说的箭头函数,想默认返回一个对象,是不是得包小括号?OK同学,这是不是写完了呀?是吧,哎,那同理,同学你说这儿是不是也可以这么写呀?等于啊。箭头函数啊。是吧,箭头左侧一个参数小括号是不是可以省略呀?走里边想默认返回一个对象,那是不是可以把对象粘走,Return,不要写,箭头的右侧直接写一个小括号回车,写那对象是不是就可以啊?啊好,那这这只是一个从编码的角度来说,一个最基本的优化是不是啊好了,再往下看还能怎么优化呀,还能更简单点。你非得在这儿定义一个变量,完了让它是一个函数,然后这块再写这个变量吗?就非要这么麻烦吗?
05:08
同学完全可以不用这么麻烦,看着connect函数调用的时候,各位是不是传俩参数啊,嗯,这是第一个,这是第二个给它落下来,来,咱这么写啊,这么写。说老师那这么写觉得还不如写一行舒服呢,你别急啊,等我再写下来的呀,我这儿不再写这个变量名了。这我也不定义这个变量了,而是直接把这函数就带走,就放在这儿可以吧,那这儿呢就不写了。那同理,你说第二个参数是不是也可以直接就把这函数粘走,这变量我是不是也可以不用定义了,是不是直接写在这儿对吗?那这个东西往前缩进一下。哎,所以说同学,如果你看公司的项目,它有可能直接就是这么混着来了,不再定义变量了,再读变量,变量是个函数,没那个必要好。
06:03
这也只是说从编码的角度上来,常规的方式是吧,啊,我们这么优化。其实还可以做一个高级点的优化,注意了各位啊,精神着点儿,接下来我讲的就不是说从编码的角度哎去优化它是吧?哎说你正常写普通函数,我改成箭头函数啊,你得写return,完了我改成一句话不写return,就不是说从这个语法上精简了,那是从哪呢?从它API的角度去精简。来,同学注意看啊。Connect我调没调用,调用了啊,这小括号,这小括号是不是调用,那我想问的是啊,应该是在这儿是吧?哎,这小括号回来,这小括号开始,你说我是不是在调用connect对吧,调用的时候传了几个参数。这是调用connect传入的第一个参数。这是调用connect传入的什么呀?是不是第二个参数,这俩参数是不是都是函数。
07:09
那么从这个API的角度去精简,那就是第二个人,你注意了第二个人。啊,可以不写函数。可以写一个对象。是可以写一个对象的。好。那你注意啊,你看我咋写,我先把原来的这种写法呢。给它住掉啊,助掉之前呢,我再微调一下,这让它连上,这让它连上好往前动一下,哎,这看起来能好一点,这是第二个参数,对不对啊,这个参数叫什么名字来着,同学们还记得吗?叫做mappach two props对吧?好。哎,它是不是函数,是它也可以写成一个对象。
08:00
来,我先写啊。不破坏原来的柱调。写好一个注释,这叫mappach啊,P小写的two pro的一般写法,它除了有这个一般的写法。它还有一个精简版的写法。复制啊。简写,那能精简到什么程度呢?一般写法你得写一函数,蓝色框的是不是函数是,那么精简版怎么写呢?注意你可以写一个对象。好对象里边呢,写一组一组的KY6。你是不是想传给UI组件一个加法叫加。啊,那值呢?
09:00
你注意看啊。我把家的action拿过来。啊说老师这这写法啊,你家就对应家的action。那么同理减呀。是不是就对应减的action。那么E不加啊,加a think,那是不是就对应加异步的action呢?老师,你这么写不对吧?你这么写,少了个环节呀。老师,首先我觉得这些number这些玩意儿都都丢了呀,传的参数你看人原来能接完,这能用,哎,这也能接,哎,这也能用,老师你这么写,那东西不被搞丢了吗?还可能有一个感觉,老师不说别的,原来是不是dispatch啊。老师,你这连pach你都不写啊。那完了,那你这东西走不下去了呀,你不dispatch怎么能通知store给你进行加还是减呢?是不是肯定是有这些疑问的呀,来同学,我们先看效果,看看它行不行是吧?不行咱还得改呢,如果行,哎,咱再分析它这玩意是怎么回事呢?来走开启一下项目啊,刚才我停了开启一下。
10:24
走。稍等控制台呢准备好。等着它启动啊。好了,目前来看没报错是吧?来注意了各位,我点一下加可以吧,我点一下减可以吧,我点当前是基数在加走,现在是二不行,那三就可以。E不加。等了一会儿哈,走,等会儿是吧,再走是不是又等了一会儿。功能能不能实现,能,但是这玩意儿咱得说明白它是咋回事儿啊,你是稀里糊涂的就写了个对象,他就成了来。
11:08
想把新版看明白啊,这个简写版那就得把原来的写法你看明白是吧。啊来同学,原来的写法是怎么回事呢?你是不是传给了UI一个家?对。这个加是不是一个函数,对,那么你就来到UI里边,咱就找到你调家的地方,是不是在这儿呢?调你父亲当年给你传过来那家,对吧。哎,加几啊啊,你说加Y6乘以一是用户选择的那个值啊,行同学给没给加传递东西传了吧,红色框里的东西是啥意思?各位你是不是正在调用这个加法呀。对吧,传没传值啊,传了加法在哪儿了呀?回到容器是不在这儿呢?那你传那个值是不是就被接到这儿了呀。
12:06
I然后呢,是不是就掉了pach,然后呢,是不是就创建了一个加的action加几是不是你传的number值。那同学我问你是不是最终就分发了一个加法的action?然后呢,那就再往下分析,说store就拿到了,道呢,就交给了咱写的谁呢?Reducer是不是reducer就帮你加工了,是不是这一套是不是就打通了呀?好,不用再分析减了,咱把这加分析明白了,同学,啥都透了,这是原来的,你必须得保证这块你能读明白,然后咱再看这儿啊,你就仔细的分析好了,同学。回到UI里边,请问你调没调用加老师,我掉了的的确确掉了那个小括号开始小括号结束,我正在调是吧,好传没传参数,嗯传没传参数传了吧。
13:04
你这参数传的是不是用户选择的那个值啊,一或二或三对吧,好,是不是正在调用加。同学,你是不是得保证这个加它是个函数,你才能掉它呀,不是函数,你能写小括号调用吗?不能,那这个加它到底是不是一个函数呢?我也不知道,那咱就看看这个容器组件当年传过去的加。他到底是个什么玩意儿?同学,容器组件当时给UI传的家,是不是这么一个玩意儿?那他是谁呀?同学,他是谁啊?老师,他是创建家的action,是不是一个函数啊?老师,我也忘了它是不是一个函数,那你往上看。这东西是不是在这儿引入的啊,从哪个文件引入的呀?啊,Redus里的啊,Action引入的,那你就找到redus,你就找到这个action。
14:04
你是不是引入这东西了,来去这文件里边CTRLFCTRLV同学,东西是不是在这呢。是不是在这儿呢?我问你它是不是一个函数,嗯,是不是一个函数是。接没接收到参数接收到了,然后呢,哎呀,他是不是哎创建了一个加的X呀。所以说同学你回到你的容器组件里边,你给没给UI传递加传了,传的是不是一个函数。是吧,是一个函数,但是这个函数是不是只能创建对象啊。那这个函数是不是不包含dispatch这个功能啊?那同学你看你从UI组件咱就开始捋,哎呀我调加法了,哎呀,我给你传了一个Y值,那就调用了容器组件里边,人家给你传过去的这个increment action,那我问你同学这个方法是不是能调用,有没有返回值啊,按住CTRL键点它有没有返回值,箭头函数,小括号,花括号是不是有返回值,你告诉我返回的是啥是吧?Action。
15:17
好,那同学你觉不觉得事情到这儿呢,好像就没走下去,UI里边我真掉家了,我真给你传值了,那我就真真正正的调用了这个东西,你说对不对,那这个东西调完了是不是有个返回值。对不对,那返回值是什么呀?是不是action对象啊。啊,别觉得这会儿好像没写number就收不到了,同学家是不是传过去了?加的值是不是一个函数对,按住CTRL函数能不能接受参数能,那你回到UI里边,你传没传参数传了,你看这不就走通了吗?啊来往下再接着走啊,接着走啊,你掉了家家谁传给你的谁传给你的吧。
16:00
是不是容器组件?哎,那各位你看好了啊,确实是容器组件传给我的,那容器组件还真是一个函数,那这个函数一定要用加,是不是就给你返回一个action啊同学,但是你觉不觉得事情到这儿就停住了?那你掉了,嗯,你传值了,嗯,那我就帮你去调用这个action,嗯,我就给你一个加的action好了,事情到此结束,为啥?为啥你这action是不是没有经过dispatch分发出去呀,那表面上这事儿是不是就停了呀,但是事实呢,事实在这儿,同学来,你打开咱这个3000,你点加的时候他真能加呀,那这是怎么回事呢?那我说一下啊同学。就是如果你用了这个简写方式啊,你只需要写到这儿,你只需要把action给人家提供过去。React-redu啊,React杠能帮你做一个自动分发的动作。
17:00
这就是优化,这就不是说程序员把普通函数变成箭头函数,就这么表面上的优化,这就是属于人家API层级的优化,啥意思?人家能帮你做这事儿,人家说了,你只要给我一个action,不用你在这再接dispach,完了在这怎么办?我再A,你自己调dispatch,我再帮你去怎么往下走,不用了,你只需要在这把家的action给我。那同学你想吧,你都掉家了,你都把家的action神给他了,那他干嘛呀?他做了一个动作,就是dispatch,哎,所以说同学这个简写方式就是不用你自己在这儿一遍一遍的,我接到dispatch dispatch dispatch,你不觉得很烦吗?只写到action,人家能帮你去做分发,这就是API层面上的优化,同学现在是不是可以记一下了,Map dispach two props可以传两种值,你觉得呢?第一个就是非常传统的函数。
18:01
那么第二个就是一个对象,而且写对象的时候非常简单,各位觉不觉得家,你给UI传的家,那就对应加的action,你给UI船的减呢?那就对应减的action呗,好同学,那我们再分析一波这个加异步,你看啊,在UI组件里边,你是不是调用了你父组件当年传给你的加think呀?你传了几个值,俩值,一个是加几,一个是等多长时间对吗?好了回到容器组件里边,那你说你是不是就是变相的掉了它呀,对吧,那主CTRL键打开它,它接收几个参数。是不是一个是值,一个是时间呀,那经过这么多东西一走,那同学你说最终是不是还是之前那个逻辑到点了,然后这是不是dispach啊,这是不是就完成了呀,所以说同学你可以记一下啊,简写方式就是map dispatch to pro,可以写成一个普通的函数,也可以写成一个什么呀,对象,那以后我们用哪个呢?就是用这个。
19:12
哎,同学,记住一个原则,就是你只需要点到为止,你只需要给人家写到A,你要加对吗?好了,React-redu,你好,程序员要加,我已经准备好了加的action,接下来开始你的表演,然后react-redu就说,哎呀,那你这不是给我准备了一个加的action吗?那我就帮你做一件事,Dispatch完事,这就是哎,优化。好啊,这小节呢,我们先停一下啊,大家把这一定要想好了,那在笔记里边给大家补一句吧,是吧,啊,补一句map dispatch to props,再来一个备注,嗯,这个呢,叫做备注一。复制一份,再来一份吧,这是四备注二啊,Map dispatch to props啊,逗号也可以是一个对象。
20:11
这小节停一下。
我来说两句