React-Redux 总结
一、定义与功能
React-Redux 将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component)
1、UI 组件特征:
- 只负责 UI 的呈现,不带有任何业务逻辑
- 没有状态(即不使用
this.state
这个变量) - 所有数据都由参数(
this.props
)提供 - 不使用任何 Redux 的 API
2、容器组件特征:
- 负责管理数据和业务逻辑,不负责 UI 的呈现
- 带有内部状态
- 使用 Redux 的 API
总结:
UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。
React-Redux 规定,所有的 UI 组件都由用户提供,容器组件则是由 React-Redux 自动生成。也就是说,用户负责视觉层,状态管理则是全部交给它。
二、使用与方法
1、connect方法 输入UI组件, 输出容器组件
React-Redux 提供connect
方法,用于从 UI 组件生成容器组件。
// TodoList-> UI组件; VisibleTodoList -> 容器组件
// mapStatetoProps,mapDispatchToProps -> 它们定义了 UI 组件的业务逻辑。
// mapStatetoProps 可省略,若省略,UI 组件就不会订阅Store,就是说 Store 的更新不会引起 UI 组件的更新
import { connect } from 'react-redux'
const VisibleTodoList = connect(mapStatetoProps, mapDispatchToProps)(TodoList);
(1) mapStateToProps(
state
[,props
]) 负责输入逻辑,即将state
映射到 UI 组件的参数(props
)
state: 必选,
state
对象;props: 可选,
代表容器组件的
props
对象mapStateToProps
会订阅 Store,每当state
更新的时候,就会自动执行,重新计算 UI 组件的参数(props),从而触发 UI 组件的重新渲染。
// map Redux state to component props (把 Redux state 映射到 component props)
const mapStatetoProps = (state) => {
return {num: state}
}
// 使用ownProps作为参数后,若容器组件的参数(ownProps)发生变化,也会引发 UI 组件重新渲染
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
(2) mapDispatchToProps 负责输出逻辑,即将用户对 UI 组件的操作映射成 Action。
// map Redux actions to component props (把 Redux actions 映射到 component props)
const mapDispatchToProps = dispatch => {
return {
onIncreaseClick: () => dispatch(increaseAction)
};
}
mapDispatchToProps 分为两种类型:函数和对象
mapDispatchToProps
是一个函数,会得到dispatch
和ownProps
(容器组件的props
对象)两个参数。
mapDispatchToProps
作为函数,应该返回一个对象,该对象的每个键值对都是一个映射,定义了 UI 组件的参数怎样发出 Action
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
});
}
};
}
mapDispatchToProps
是一个对象,键名是对应 UI 组件的同名参数,键值应该是一个函数,会被当作 Action creator ,返回的 Action 会由 Redux 自动发出
const mapDispatchToProps = {
onClick: (filter) => {
type: 'SET_VISIBILITY_FILTER',
filter: filter
};
}
三、原理与流程
为了让子组件能够获得context属性,React强制要求根组件(此处为Provider组件)提供getChildContext实例方法,以及类属性childContextTypes。而子组件想要获取context,也必须定义类级别的Counter. contextTypes属性。定义是双向的,如果缺少了任何一块,子组件都获取不到context属性。
我认为父组件的那块定义是在Provider的代码中实现的,而子组件的那部分是在connect方法中实现的。
因此connect方法为Counter组件添加的context属性实质上是由Provider传下来的,这样在mapStatesToProps方法里的state参数实质上就是this.context.store.getState()方法获得的。
页面首次加载以及之后有互动行为之后整个逻辑的流程:
(1)页面首次加载时,store里的初始state获取过程:
createStore(reducers,defaultParams)的调用,其中reducers可以使一个reducer,也可是redux.combineReducers过的reducer的集合。
createStore方法会对每个reducer去dispatch一个action.type=@@redux/INIT类型的action,而这个action一般在reducer的代码里不会被handle,直接掉入default块,于是就返回了state的初始状态。
然后一般就会ReactDom.render()将应用渲染出来,每个子组件的容器组件通过传入this.context.store.getState()方法获得的state对象, 以及容器组件上自带的ownProps给mapStatesToProperties方法,来构建props,最后将props应用到子组件的UI组件上。
(2)互动行为之后整个逻辑:
当在子组件上发生交互行为,如click时,mapDispatchToProps会定义click触发时应该dispatch哪一个action的映射。
然后store接收到这个action后会进行reduce,得到最新的state,然后再调用所有的子组件的mapStatesToProps方法生成新的props。
最后对Provider进行重新渲染。当然上面的事件计算出来的很多state可能都不会发生变化,所以diff算法不会去修改这些没有发生变化的组件,因此性能也比较好。
React-Redux 总结的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性
reduce().filter().map().some().every()....展开属性 这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
随机推荐
- Android 面试汇总<三>
1.3 计算机网络 基础 Q:五层协议的体系结构分别是什么?每一层都有哪些协议? 技术点:网络模型.协议 思路:分条解释每层名字以及协议 参考回答: 物理层 数据链路层:逻辑链路控制LLC.媒体接入控 ...
- emqttd学习教程(二):emqttd配置说明
一.配置文件说明emqttd消息服务器通过 etc/ 目录下配置文件进行设置,主要配置文件包括: 配置文件 说明 etc/emq.conf 消息服务器配置文件etc/acl.conf 默认ACL规则配 ...
- nfs服务安装部署测试
nfs:网络文件系统作用:某个文件或目录共享,使其它用户可以通过网络访问此共享目录或文件.***特别注意共享的目录权限1.使用nfs需要先安装 yum install -y nfs-utils rpc ...
- mysql登录的三种方式
1.远程登录mysql 先授权:如:grant all on *.* to 'root'@'192.168.81.130' identified by '52033dd';查看是否生效:select ...
- Netflix颠覆HR:我们只雇“成年人”
员工的最佳福利,是与优秀者一起工作 ● Patty McCord / 文 李钊/译 担任Netflix的首席人才官时,我与CEO里德·黑斯廷斯一起做了一份127页的PPT,命名为<自由& ...
- RTX系统整合记录
1.切换数据库RTX常见问题解答五. SQL数据库配置 2.同步系统组织机构 部门同步 用户同步https://blog.csdn.net/qq_21703215/article/details/80 ...
- 【Qt开发】Qt应用程序发布封装
问题:在使用Qt5.3.2编写程序并release,文件夹中已经添加了必要的dll,但在其他机子上运行程序失败,出现了下面的情况: 解决方法一:在C:\Qt\Qt5.3.2\5.3中进入mingw48 ...
- [转帖] 国产x86-海光禅定 2018年营收过亿?
中科曙光:全年业绩稳健,海光芯片营收过亿 X86服务器市场Intel占据绝对优势:X86处理器已经成为全球最广泛使用的处理器架构之一,尤其是在PC和服务器领域,其中在处理器市场的份额高达90%以上.中 ...
- Android Studio 如何获取 text文本内容
1.找到目录的main先建立assets格式的文件夹 2.再把需要读取的txt 文件放入到该文件夹下(名字随意),这里取 list.txt. 文件内容 格式如下 3.读取文本内容 工具代码 /** * ...
- 【中间件】Kafka 学习 01
KafKa 博客教程-1 博客教程-2 kafka简介 kafka起源 Kafka是由LinkedIn开发并开源的分布式消息系统,2012年捐赠给Apache基金会,采用Scala语言,运行在JVM中 ...