00:00
好了,各位聊完了这个异步action,咱们再聊一个库的使用。同学们,我们知道啊,现在咱们学了一个技术叫做react。Facebook出品一个比较棒的前端框架,对吗?然后我们又学了一个东西,叫做re,另外一个团队的作品,专门用于做集中式状态管理的,对吗?可以用在a view react项目当中是吗?他俩完全是两个团队的作品。啊,随着这个时间的发展哈。Facebook公司发现的很多程序员都喜欢在自己的react里边去使用,诶,做集中式的状态管理。然后Facebook公司就说,好啊,那既然你们这么喜欢在react里边去用管理状态,那本着简化大家编码的原则,那我就给你出一个库吧,这库叫什么名字呢?React杠,Redu。
01:03
同学,这就是谁出品的了呀,Facebook。啊,这个就属于react的一个插件库。你像那跟react不发生关啥什么关系啊,但如果说react这个库,那就跟react有关系啊,啊是Facebook官方出的这么一个插件库。那出这东西干嘛呀,我不用它,我这不也用上了吗?但是如果说你要是用上了人家出的这个react-redu,你就能更加方便更加舒服的在你的react项里面使用Rex。哎,所以说人家也不是闲的没事干出这么一个插件库,出这个插件库只有一个目的,这个react杠让你更加舒服的在react项目里面去使用,Du I说,老师来吧,开始编码吧,不等一等。我们先看一个图,最小化。
02:01
找到给大家的资料,这里面是不是有个原理图啊,哎,我们打开这个react-redu模型图。注意不是react,不是是react杠啊,是react里边的一个插件库,好打开它。走。这是一些概念性的东西,我们必须要清楚,首先我们一句一句去读啊,所有的UI组件,诶,上来就跑出一个概念,UI组件啥意思呀?来吧,我们看图,这是你求和那个组件的UI组件,这个是你求和组件的容器组件老师,什么叫UI,什么叫容器呀?React redux这个库把组件分为两类,一类组件叫做UI组件,另一类组件叫做容器组件。那么,何为UI,何为容器呢?UI组件的外侧都要包裹一个容器组件。
03:05
容器组件同学注意。蓝色的是容器组件啊,容器组件可以随意的跟Rex打交道。哎,可以使用任何redux相关的API。但是UI组件不可以,它只是做界面的呈现,只是绑定一些事件的监听,只是写一些逻辑,但凡跟Rex打交道的地方,都得用容器组件去做。而且你看它俩的关系,容器组件有没有一种感觉,它包着UI组件呀。所以说第一句话,所有的UI组件都应该包裹一个容器组件,他们是父子关系。哎,父子组件关系谁是负啊,容器组件,再读第二句,容器组件是真正和redux打交道的,谁呢?就这蓝色的就他。
04:05
在容器组件里边,您可以随意的使用redux相关的API。啊,到点就各种方法你都能用。第三句,UI组件中不能使用任何redux的API。就里边这个,就这UI组件,你不能看到任何的什么action reducer store啊,什么都不能看见。好,再读第四句,容器组件会传给UI组件什么呢?两种东西,一、redux中所保存的状态,二、用于操作状态的方法。那这怎么记呢?同学,你想来UI组件是不是写页面的,嗯,是不是做呈现的,是不是绑定用户的什么各种事件的,对不对,你比如说点了加这个按钮,我就想加一。那我想问大家啊,来回到这页面里边,这加号,就所有的这些东西,界面的呈现以及监听是不是都在UI组件里边写的呀,那我是不是得在这个监听里边。
05:14
去操作吧。那你想一下,回到这图。UI组件还不能用任何的。这个re的API,那怎么办呀,他就只能麻烦副组件。你比如说同学举个例子,我想初始化展示啊,当前求和为那个零,我想初始化展示,那怎么办呀。你不能自已去找redux,不行,你得让你的父亲容器组建。去里边把那零取出来。完了,父亲再通过props这种形式再传给你,为什么非得强调pro呢?因为他和他之间是父子关系,那父子之间传东西再简单不过了,是不是借助pro?
06:03
OK。哎,所以说扣到这个主题上了,对不对?父子之间传东西借助谁呀?Pro,那同学你想想UI组件无非就干两件事儿,一展示re里的状态,二根据用户的行为去操作redu里的状态,你说对吧?那所以说嘛,容器组件不给你传状态,你怎么展示,容器组件不给你传操作状态的方法,你还碰不到,Re完了他还不给你操作状态的方法,那你觉不觉得你这条线。就走不下去了呀。是吧?哎,好了,再读第五句备注容器啊,给UI传递什么状态,还有什么操作状态的方法,均通过什么传递pros。那这我说一下啊,容器给UI传递状态和操作状态的方法,这状态都指的是哪儿的状态呀?
07:01
是不是里的状态。兄弟。UI如果说展示是自己家的状态,自己操作自己家的状态,同学,那还传什么呀?this.state是不是直接就读了this.set state是不是直接就修改了呀,对吧?哎,所以说同学我这就简说了,就没说的那么复杂啊,Redu里的状态那自身的那还那还聊这图干嘛呀,对吧。啊,捋顺捋顺。所有跟Rex打交道的东西全都得交给谁,全都得交给谁,容器组件,容器组件接过来,再通过props再传给你去吧,做展示。啊,然后容器组件呢,当时再给你传了一个操作状态的方法,那你在UI组件里边,你没有调用redux相关的API,你只是调用了当年你父亲给你的一个函数,啊,你调用了东西给父亲了,然后父亲再去操作,Re,这个就是react-redu模型图。
08:04
啊,这五个点你必须得特别的清晰,这个图得在你的脑子里,咱们才能接着往下写。那问题来了。那容器组件怎么从re里边读东西啊,那就到点get state呗。啊,那容器组件怎么去影响redux里的状态发生改变呀?那就到点dispatch一个action对象呗,是吧,好。啊,那这一小节咱不讲别的,就说这图啊,一定要理解好了是吧?同学,你觉不觉得react gun redus总有一种感觉,不想让你在他的这个组件里边随意的去写redux相关的东西。是吧,哎,必须得来一个容器组件,嗯,好,这小节呢,我们停一下,我们这小节讲的就是react-redu的一个理解,那对它的一个理解,好。这小节呢,我们停一下。
我来说两句