00:00
好了各位,咱继续在上一小节呢,我们讲了数据的共享,回到页面,我有两个组件,一个叫做count,一个叫做person,已经能完成他们读取了对方的数据,对吧?哎,怎么办到的呢?借助了这个中间人redux是吧?这就是数据共享版,回到我们的代码当中啊,我做一件事儿,把刚刚我所写的数据共享版啊这个东西给大家留下,CTRLCCTRLV,然后右键呢,我改个名,这按照我们的顺序啊,是第七个了,下划线src_react-redu,这什么版本呀,叫做数据共享版,走哎,把这个代码大家留下,同学,这个版本啊,一定要多加练习啊,以后呢,我们干开发呢,肯定如果你的react的应用里边,但凡你用到了Du,肯定会需要多个组件去共享数据,肯定都得这么写,也得借助react-redu啊,那回到read密文档里面,我把笔记呢也大家写好了。
01:00
大家注意一下啊,我这个笔记呀,这里边是123456,但是我这却是1234567,这是怎么回事呢?同学说一下第一个版本实在实在是太简单了,就是用纯react实现一个加和的这么一个组件,真的没有什么注释可写的,所以说第一个同学我并没有给你写笔记啊,注释我也没写太多是吧?那所以说我这里一上来笔记里边呢,是干货,直接讲的就是精简版需要注意什么,打开你看这里边东西都告诉大家怎么见文件呀,需要注意哪一步啊,如果各位练习的时候说老师我忘了,我建议你尽量看一下我的笔记,然后回想起来,然后自己去写,而不是说完全参考我的代码,左一眼右一眼,那不是练代码,那是练打字对吧?哎,所以说同学注意啊,我这儿呢,和这边是差一位的,你看后边这个名字就可以啊,精简版完整版异步action版啊,然后基本使用,然后优化,然后数据共享对吧?好来我们读一下这个数据共享版,我们需要注意哪些问题?
02:00
呢,首先我们的目标是定义一个person组件,它要和count组件通过redux进行共享数据,这是我们的目标。那么第二个呢,你得为person组件编写什么呢?Reducer啊,Action呢,配置常量啊,这一套东西,那又出现一个组件了,Redux里面肯定得又写一套东西啊,对吧?好了,那说说重点,重点就是percent reducer和count reducer必须要经过combine reducer4的合并才能去使用。你不能把count的reducer交给star,那person就废了,那同理,你也不能把person的reducer交给star,那么count就废了,对不对?哎,而且你要注意之后合并之后,它所保存的总状态是啥呀?是一个对象,哎,注意啊,同学,不再是你单纯的那个零了,而是一个总的什么东西叫做状态对象呢?啊,那再看最后一句,交给道的是总reducer,这是肯定的。最后注意,在组件中取出状态的时候,记得要取到位,这是什么意思呢?同学,什么叫取到位呢?把这关掉啊,我们来到src来到container,我们来到这个count组件,你比如说我是不是想取出那一堆人呢?你就得state点人s.lines咱也说了,同学,我知道这名简直太low了啊,这一看都呵呵了是吧?一会儿呢,单独开一小节,我们把它改掉。现在为什么这么写?同学一句话不再解释了,就是想让你更加舒服的知道。
03:30
你写的到底是什么啊?来同学这儿人数,这是我随意定义的,什么叫取到位呢?这叫取到位,什么叫没取到位呢?这就是没有取到位。state是总状态对象,你不能直接把总状态对象交给这个人数啊,是吧?哎,你得是点人,点length就可以了,那好了,折叠起来,接下来呢,我们讲一个概念啊,同学叫做纯函数。哎,概念没有什么,编码的同学就是一个概念非常简单啊。同学,我启动一下咱们的这个案例啊,N PM start刚才被我停掉了啊,我启动一下稍等啊。
04:09
把这个呢,原来的关掉,控制台呢,给它准备好,你们练习的时候也是啊,控制台准备好,万一有什么错误什么的,可以及时的发现啊,稍等。同学,现在这个东西肯定是能用的,对吧?我这边加这也加我这但凡来一个人叫做Jack,这AC这呢,让他是19岁,你点击添加人就多了一个人数,这也增长对吧?好同学,回想一下人的这个reducer我是怎么写的,人的reducer分析人的reducer是干嘛的呀?啊,是负责初始化一堆人和加工一堆人的,对不对?好了来回到这儿。找到瑞纳斯。找到reducer,找到里边的person reducer。分析一下第十行和第11行,这是不再添加一个人。同学,你发现啊,我在给你讲react的时候,我在给你讲的时候,好像我很少用这种东西,什么push啊,哎,什么on shift这些东西,你发没发现,很少去用这些。
05:09
我一直都在用这种,哎,点点点哎这个展开运算符,那为什么不用一下push on shift这些对数组操作,呃,这个数据的方法呢,你比如说数组里边加一个,呃,数组里边往前加一个,往后加一个,数组里边删除一个。那为什么都喜欢用这种形式呢?来,同学,我给你改良一下这段代码啊,我这么写,看看大家明不明白什么意思,P state是不是之前那一堆人?同学,你能来到第十行的判断能进来是不是证明你想添加一个人啊?你说我想添加一个人,想把这个人往前加,我非要像12行这么写吗?我非要这么写吗?其实也不是,同学,你说这么写是不是理论上啊,也读的通,就是之前那一堆人点on shift,是不是往前加东西,加啥,加一个date。
06:05
然后我再把谁返回出去呢?同学,你想想,完全可以把从语法上来说,原来有一堆人了是吧?啊,在这儿传递过来了,那如果你是第一次,那我就把这个音力给你,那如果不是第一次,你是有值的,那我就拿到之前的一堆人往前边放个东西,再把它弄回去是吧,完全可以吧,从这个语法层面上来讲,但是你发现啊,回到页面啊,如果你真这么写啊,回到页面啊,你刷新,你看着,当你加一个人的时候,注意了,JACK19岁。添加同学,这人加了吗?没有这儿变了吗?没有,那是为什么呢?回到代码当中。同学,想想这有可能是因为什么呢?说老师是不是你的p state压根就没加进去呀?嗨,也有可能哈,那这样我们在return p state之前,我输出一下,看看p state到底加没加进去,我新输入的人回到页面看效果,现在有一个是TOM18,我输入名字啊Jack jack19岁,点击添加注意走。
07:17
同学,没加进去是吧?没加进去,而且控制台有输出吗?好像也没有,那回到这儿,那刚才我到底添没添加一个人呢是吧?来,那我在最上方呢,再来一个输出conslo,我再来个艾服务,我再校验一下,看看到底有没有添加一个人啊好,回到页面,我整体刷新一下,再来一下Jack啊,19岁点击添加。说老师那刚才怎么没有这输出呢?你加个艾特符就好了,刚才可能是刷新不及时啊,好同学,那你看一下现在已经有这个艾特福的输出了吧,那就证明其实我已经来到哪个逻辑里边了,是不是添加一个人,而且你注意观察,最主要的是下方这个数组同学来,你打开来看,就你输入那个JACK19岁同学是不是已经加进去了呀。
08:10
原来的01TOM18是不是也在里边呢?那同学回到这儿来,你想想吧,这是什么情况呢?我走了呀,这个艾特符啊,是吧?哎,那我也输出了之前的状态,里边确实放了一个人呢,我也把之前的状态返回出去了,那怎么就不好用呢?那同学说一下,从语法上来说。我拿到了之前的数组。我往前边放个东西,确实啊,咱得承认各位你确实把东西放进去了啊,你也确实返回了,但是在redux底层他做了一个判断。如果你返回的这个东西和之前的状态是一样的。那我就不进行页面的更新。啥意思呢?同学,你返回的是不是state?
09:02
那你刚才对pre state是不是往前边加了个东西啊,说老师他判断应该是不一样的呀,注意同学,Pre state存的值可不是一个基本类型,零啊一啊,什么字符串啊之类的这些东西。哥们儿,人家存的是什么呀,是不是数组啊,它底层做了一个浅比较。什么叫浅比较呢?他发现你现在返回这个p state的地址值和你之前的那个是一样的,它就不进行页面的更新了。哎,这会儿你一定要知道,而且在这儿呢,我们也发现了一个小小的问题啊,同学你说我这A是不是写成了字符串的19,那我之前那个是不是数值的18呀?那我想处理一下这个问题怎么办呀?回到代码当中找到container对吧?找到person,找到这儿,那来吧,啊找找你这儿拿到的是添加一个人的年龄是吧?点value,那你说你往这放age的时候是不是可以这样啊,你比如说value,然后乘以一,这样的话不就转成数字了吧?是吧,我们再试一下啊,来刷新页面,JACK19岁。
10:10
添加。打开这19是不是就对了呀?至于说页面为什么没更新,那就像咱刚才说的,回到reducer里,兄弟,人家判断的是你返回的这个和之前那一个是不是一个?那同学我想问你,他俩都是一个数组吧,是,我知道数组里的东西发生变化了,但是如果你进行浅比较,我想问各位,那它俩是不是一样的呀?哦,OK。所以说这是一样,比如说同学我写一个东西,Let一个AR啊,数组啊,等于什么呢?13579,然后我AR点儿push,我是不往里边放东西啊,你比如说推一个十啊进去了,那我想问各位,你数组里边确实推进去了一个人,但是这个arr还是之前那个arr吧,地址值没有改吧,所以说里边你加了再多的东西,Redux也不认为这是一种改变啊,那所以说怎么办呀,不要直接返回原来的这个pre state,那怎么办呢?你必须得弄出来一个新数组,那你看我把这删掉,这个也删掉,这个也删掉,如果我这么写。
11:23
那含义就不一样了,你看着反括号点点点p state,我是拿到了之前那一堆人用展开运算符展开,然后放到了一个新的数组里,对吗?这个数组这个数组和P那个数组它不是一个数组吧?啊,你对比它俩的地址值,那是不一样的,然后你再把date放在前方就可以了啊回到这儿,然后呢,刷新一下,走Jack,然后呢,19点击添加,这回就行了。所以说同学们你会发现在react里面,还有Du里面,我们很少去使用这种什么push啊,啊,什么这个on shift啊,这些东西进行数据的修改,一般都是弄出来一个新的数组,一个新的对象给它交出去,而且啊,同学你这样写你破坏的一个原则。
12:16
你要是这么写的话啊,这么写是对的哈,咱说刚才那么写来撤回来,哎,就这么写,你要是这么写,你就破坏了一个原则。你的reducer就不再是纯函数了。哎,那么问题来了,什么叫纯函数啊?回到课件给大家解释了啊,高函数和纯函数,高阶函数呢,我们之前是不是已经讲完了各位,哎,高阶函数已经讲完了,我们说一下这个叫纯函数,读一下啊,它是一类特别的函数。只要有同样的输入,必定得到同样的输出,这就是纯函数。也就是说,同学有这么一个函数叫做DEMO,你在上一秒钟调DEMO的时候传入一,它的返回值是一,如果在下一秒钟你调DEMO的时候啊,你传入的是二,走它等于的是二。
13:13
那这可以,因为你传入的不一样了嘛,但是比如说举个例子,说好久之后你调DEMO,你传的是一。他如果这个时候告诉你我返回的是九,那么DEMO1就不是纯函数了。因为同样的输入。同样的输入并没有得到同样的输出,一个是一,一个是九,比如说老师还能有这种函数呢,那函数传入的参数一样,返回值肯定一样的。哎哟,谁说的呀?回到代码里,我给你写个函数,它的名字叫做DEMO。他呢,收到一个参数叫做A结果它的返回值啊嘿,Master random,一个随机数加上A同学,那我问你啊,你第一秒钟调DEMO和你第二秒钟掉,它肯定不一样,对吗?那你看这就属于同样的输入,你却没有得到同样的输出,对吧?因为这里边伴随着随机数,好,这就是纯函数的概念。
14:13
回到课件里面,我们继续往下读,纯函数必须遵守以下约束啊,都有哪些约束呢?我们读一下。首先第一个。你不得改写参数的数据。啊说老师这啥意思呢,你比如说还是刚才那函数,这不是A吗?如果你里边进行了这种操作,A等于九,不好意思,DEMO不纯了。因为你改写了参数的数据,你A,比如说接到的是一,你在这A等于九,好,就这么一个动作,你的DEMO就不再是纯函数了,因为它改写了参数数据。是吧,那同学你回到咱们的reducer里边来看,你说如果我这么写,同学这是不是参数数据对on shift是不是影响原数组?
15:00
数组点on shift是影响原数组的呀,各位是吧,所以说你这么写,你觉没觉得你把p state给改了,你这就属于咋的了,是不是改写参数数据了,那么这个person reducer就不纯了。哎,所以说reduce的要求是reducer要是一个纯函数,不允许你用这种写法,你只要这么一写,函数就不纯了,哎,回到课件里面,我们再往下看,而且呢,这个纯函数里边啊,不能有任何副作用的操作。什么叫做副作用呢?你比如说我发送网络请求了,网络请求这东西最靠不住对吧,可能网速慢了或者断网了,这数据可能说没就没了,所以说同学纯函数里边不可以发送网络请求。也不可以调入一些什么输入输出的设备,同学就始终有一种感觉,不靠谱儿的事儿,纯函数里边不能做。对吧,哎,网络请求输入输出设备可能你就调不到了,对吧,所以说不靠谱的事儿,就简单来说,接地气点说不靠谱的事儿,车函数里边不能做啊,还有第三个就是不能调用data.now或者ma点软等这种不纯的方法。
16:10
说老师data now和master random怎么就不纯了呢?同学,我问一下啊,被点now,你现在掉是不是给你一个时间戳,你再调一下,是不是又给你一个时间戳。同样调用吧,传入的都是unde find吧,那你说最终的结果一样吗?不一样,那我想问一下,同样的输入你得到同样的输出了吗?并没有,哎,所以说纯函数里面不可以去调用这些不纯的方法,如果你掉了,那你的函数也不纯了,这就是纯函数的一个概念以及一些规矩。而且最后补一句话说redux中的reducer必须是一个纯函数,这是人家的要求,那所以说嘞,我们这就不能这么写了,那这几行呢,我就都给它删掉了,或者说我留下来吧,同学,我把这个艾特符删掉,我把这块给大家留下来啊,写一个错误的示范啊,在这写好处是叫做此处不可以这样写,这样会导致谁呢?Pre state咋的被改写了啊,然后呢,Person reducer就不是纯。
17:22
函数了,对吧,啊来,那不是纯函数怎么的呢?就能影响着redux不能够识别状态的改变,那得这么写是吧?方括号点点点p state。Pre state,嗯,点点点p state直接粘过来了啊,我打错单词了是吧?啊pre打成啊,Data放在这儿这回就可以了。啊,必须要这么写,你这么写那个引用不就断开了吗?你这个数组和p re那个数组它不是一个数组,OK啊,这就是一个纯函数的一个概念啊,说老师那纯函数它就是一个概念。
18:06
人家说的时候,以后看文档的时候,人家说了该函数要是一个纯函数,那就你懂我懂就明白怎么做了,是吧?哎,没啥难的,就是一个概念,好了,这小节我们停一下。
我来说两句