-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
面试官:说说你对Redux的理解?其工作原理? #198
Comments
过于简单了,属实是,这只能说是用法理解,不能说是原理理解 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
一、是什么
React
是用于构建用户界面的,帮助我们解决渲染DOM
的过程而在整个应用中会存在很多个组件,每个组件的
state
是由自身进行管理,包括组件定义自身的state
、组件之间的通信通过props
传递、使用Context
实现数据共享如果让每个组件都存储自身相关的状态,理论上来讲不会影响应用的运行,但在开发及后续维护阶段,我们将花费大量精力去查询状态的变化过程
这种情况下,如果将所有的状态进行集中管理,当需要更新状态的时候,仅需要对这个管理集中处理,而不用去关心状态是如何分发到每一个组件内部的
redux
就是一个实现上述集中管理的容器,遵循三大基本原则:注意的是,
redux
并不是只应用在react
中,还与其他界面库一起使用,如Vue
二、工作原理
redux
要求我们把数据都放在store
公共存储空间一个组件改变了
store
里的数据内容,其他组件就能感知到store
的变化,再来取数据,从而间接的实现了这些数据传递的功能工作流程图如下所示:
根据流程图,可以想象,
React Components
是借书的用户,Action Creactor
是借书时说的话(借什么书),Store
是图书馆管理员,Reducer
是记录本(借什么书,还什么书,在哪儿,需要查一下),state
是书籍信息整个流程就是借书的用户需要先存在,然后需要借书,需要一句话来描述借什么书,图书馆管理员听到后需要查一下记录本,了解图书的位置,最后图书馆管理员会把这本书给到这个借书人
转换为代码是,
React Components
需要获取一些数据, 然后它就告知Store
需要获取数据,这就是就是Action Creactor
,Store
接收到之后去Reducer
查一下,Reducer
会告诉Store
应该给这个组件什么数据三、如何使用
创建一个
store
的公共数据区域还需要创建一个记录本去辅助管理数据,也就是
reduecer
,本质就是一个函数,接收两个参数state
,action
,返回state
然后就可以将记录本传递给
store
,两者建立连接。如下:如果想要获取
store
里面的数据,则通过store.getState()
来获取当前state
下面再看看如何更改
store
里面数据,是通过dispatch
来派发action
,通常action
中都会有type
属性,也可以携带其他的数据下面再来看看修改
reducer
中的处理逻辑:注意,
reducer
是一个纯函数,不需要直接修改state
这样派发
action
之后,既可以通过store.subscribe
监听store
的变化,如下:在
React
项目中,会搭配react-redux
进行使用完整代码如下:
小结
参考文献
The text was updated successfully, but these errors were encountered: