00:00
大家好,我是上硅谷H学科的讲师张小飞,在程序员节日来临之际,在这里我给大家分享一道面试题,下面我们来看一下。好。这个问题呢,是你去面试一家需要招相关工程师的常见最最常见的一个问题。啊,问的是什么呢?问的是redux它管理状态的一个机制,这个redux它跟我们re又是什么关系呢?对吧?来下面我们从几个方面来看一下,首先第一个方面你要去对redux有一个基本的理解,那redux首先来说它是一个JS库。专门用来做状态管理的。但这里面一定要强调一下,它并不是react插件库,它是一个独立于react的一个库,本质上它可以为react angle或者view项目去配合使用。
01:04
哎,本质上是可以,但是现在实际情况是基本是跟配合使用,但是一定要强调再次强调一遍,它并不是RA插件。那它的作用呢?我们可以看一下是集中式的管理,我们rap应用中多个组件共享的状态。只是官网上面说了一个,其实在实际开发中,大家要注意我们从后台获取的数据,无论是否后面是共享的。基本上都会交给管理,这是在实际开发的一个经验的一个总结,大家要注意。好,那我们它到底是一个什么样的工作原理了。哎,这里面我要给大家去画一个图,来去说明一下这个redux工作原理的一个特点。
02:03
换一下啊。看这里啊,首先呢,我们画两个整体的结构,两个两个结构啊,一个结构呢,代表是什么。主见对吧。那另一个结构是什么?是不是就是对吧,啊一个这个呢,代表的是react的组件是吧,叫component对吧?好,那上面的这一个部分是谁了,可以的,没问题吧,好,那现在的问题就是我。组件如何跟什么Du进行通信,那先我们要说出这个Du里面有了一些结构是吧?啊,有三个重要的结构与三个重要的模块啊,一个模块叫什么store,这是最核心的那个模块。
03:07
对吧,那它有一个有一个模块,用来根据老的状态生成新的状态,这个模块叫什么?或者叫用腿有多个对不对。哎,这里面画一个框啊。这个能不能懂好,能懂吗?好,下面还有一个用来专门生产action对象的一个。啊,模块叫什么,Action create。这个没问题是吧?好,还要说一下我们的store啊,它内部是管理的state状态。那我们的store,我们的组件根据大资行通信是不是就是根据store来的?Store相当于是我们之间的一个桥梁吧,Store提供了两个方法来去引用状态,一个读,一个是更新,一个什么get data,一个是PA action,对不对?那我们的组件跟通信是不两个方面,一个读状态。
04:22
读状态就必然会去调用它的什么方法get state。对吧,而第二是不是要读它的状态值,它的状态值怎么产生的呢?初始值。他是不是在产生这个对象的同时的时候,立马就会调用第一次调用C调用一次去得到什么初始状态值对不对。也就是说这个我们把它理解为第一次调用对吧,自动第一次用调用一次对吧,这个不懂,他上来就会调用,自动调用一次。
05:08
来产生一个是不是初始状态,也是它内部是有什么有状态的,对不对,它内部有状态有state。这能理解吧,啊,有state啊,包含state。好,没问题。那下面下面要说的是我除了去读状态还有一个操作叫什么更新状态,那更新状态其实是调用是做的什么话,PA分发action对不对,而这个时候来。我们去调用它,其实还要利用到我们的xqu来帮我们什么产生X对象,也就是说我们是确实调用,是做了什么方法。第四排方法没问题,但是我们是不是要接收一个什么action对象,而这action对象由谁帮我们产生action create来帮我们产生什么action理线?
06:12
对吧,这个能看懂能看懂啊好,而它一旦调用就会触发谁调用,我们一旦调用Dis就会去触发什么reducer调用。对吧,来我可以这么的啊。我们这一调用就会去触发什么reducer调用,懂不懂啊,这触发reducer调用给他传什么东西呢。啊,有两个东西会传,一个是state,是不是当前老的状态啊,那我们就取个名字叫old,什么state强调一下,还一个是什么action,我刚才不传那个action过来了吗?
07:02
这个能不懂,而这么一做,就产生了一个什么新的状态,对不对,就又会产生一个新的状态。给谁去肯定就是给多多是整体来存储它的,对不对,那也就说产生一个什么,嗯,产生一个new state,这个能不懂,那一旦产生60以后,那我的这个湿度就会去执行一些回调函数,这个回调函数呢,我们还没有做,还没有去绑定。我们要在这之前先干嘛呢?啊,我们在这之前先要做一件事情,通过试做。我们先得执行一条语句,叫多点sub s RI,后面接一个什么,也就是一个回调函数,对吧?一个监听回调函数懂不懂,而这个监听回调函数里面写的什么代码?
08:03
是不是重新渲染我的主件去的?对吧,那从如何导致于我们的这个list的调用呢?其实就是这个线了也,这里面一旦产生了性能状态,我的道就会自动的什么调用这些回调函数。调这个回的函数。对吧。这个能不能懂啊,自动调用前面订阅的所有listener,其实可以订阅多个,但是我只定了一个,对不对。那最后是不是我的组件就重新渲染。好,那说完redux的这个整个啊工作原理的结构图,下面再说一下redux它使用的时候的几个扩展啊,第一个扩展呢,是有一个react插件,叫react-redu,它是用来去简化redux的编码。
09:16
也就是说,如果我仅仅是在rank里面用。Rex不是用这个RA-redux的话,那编码稍微要麻烦一些。那用上它以后呢,能简化我们的编码,这是一个第二个库呢,是Rex-S,它实际上是redux的一个插件。而这个插件能实现什么呢?Re的异步编码,那也是默认reduction里面是不能执行异步代码的。但是呢,我们又需要在reduction里面,比如说我们要需要去发请求,就是在reduction里面的action里面写的。那默认呢,是不能写100X的。而在这里面,我们通过这样一个插件库就能去实现异步action的编写。
10:02
还有一个是react啊,D tools,这实际上是一个Chrome的插件,它能够帮助我们在Chrome里面去进行相关状态一个看啊。的这样一个调试,这个非常关键啊,也非常有用。好,那关于redux的原理,以及它的一个使用的详细教程啊,大家可以进入这一个地址啊,在这里面呢啊,视频很多,我也给大家列出来,大家如果想专门针对的看的话,是37~45之间的,这个视频是专门的去讲。从这开始啊。专门的去讲redux的使用,Redux的一个原理,以及它相关的一些扩展使用啊,大家可以通过它就能学习,学会它的一个使用。
我来说两句