React-Redux之API
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
连接 React 组件与 Redux store。
连接操作不会改变原来的组件类,反而返回一个新的已与 Redux store 连接的组件类。
参数
[
mapStateToProps(state, [ownProps]): stateProps
] (Function): 如果定义该参数,组件将会监听 Redux store 的变化。任何时候,只要 Redux store 发生改变,mapStateToProps
函数就会被调用。该回调函数必须返回一个纯对象,这个对象会与组件的 props 合并。如果你省略了这个参数,你的组件将不会监听 Redux store。如果指定了该回调函数中的第二个参数ownProps
,则该参数的值为传递到组件的 props,而且只要组件接收到新的 props,mapStateToProps
也会被调用。[
mapDispatchToProps(dispatch, [ownProps]): dispatchProps
] (Object or Function): 如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,而且这个对象会与 Redux store 绑定在一起,其中所定义的方法名将作为属性名,合并到组件的 props 中。如果传递的是一个函数,该函数将接收一个dispatch
函数,然后由你来决定如何返回一个对象,这个对象通过dispatch
函数与 action creator 以某种方式绑定在一起(提示:你也许会用到 Redux 的辅助函数bindActionCreators()
)。如果你省略这个mapDispatchToProps
参数,默认情况下,dispatch
会注入到你的组件 props 中。如果指定了该回调函数中第二个参数ownProps
,该参数的值为传递到组件的 props,而且只要组件接收到新 props,mapDispatchToProps
也会被调用。[
mergeProps(stateProps, dispatchProps, ownProps): props
] (Function): 如果指定了这个参数,mapStateToProps()
与mapDispatchToProps()
的执行结果和组件自身的props
将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数,根据组件的 props 来筛选部分的 state 数据,或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数,默认情况下返回Object.assign({}, ownProps, stateProps, dispatchProps)
的结果。[
options
] (Object) 如果指定这个参数,可以定制 connector 的行为。- [
pure = true
] (Boolean): 如果为 true,connector 将执行shouldComponentUpdate
并且浅对比mergeProps
的结果,避免不必要的更新,前提是当前组件是一个“纯”组件,它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为true
。 - [
withRef = false
] (Boolean): 如果为 true,connector 会保存一个对被包装组件实例的引用,该引用通过getWrappedInstance()
方法获得。默认值为false
- [
返回值
根据配置信息,返回一个注入了 state 和 action creator 的 React 组件。
静态属性
WrappedComponent
(Component): 传递到connect()
函数的原始组件类。
静态方法
组件原来的静态方法都被提升到被包装的 React 组件。
实例方法
getWrappedInstance(): ReactComponent
仅当 connect()
函数的第四个参数 options
设置了 { withRef: true }
才返回被包装的组件实例。
备注
函数将被调用两次。第一次是设置参数,第二次是组件与 Redux store 连接:
connect(mapStateToProps, mapDispatchToProps, mergeProps)(MyComponent)
。connect 函数不会修改传入的 React 组件,返回的是一个新的已与 Redux store 连接的组件,而且你应该使用这个新组件。
mapStateToProps
函数接收整个 Redux store 的 state 作为 props,然后返回一个传入到组件 props 的对象。该函数被称之为 selector。参考使用 reselect 高效地组合多个 selector ,并对 收集到的数据进行处理。
React-Redux之API的更多相关文章
- react第十六单元(redux的认识,redux相关api的掌握)
第十六单元(redux的认识,redux相关api的掌握) #课程目标 掌握组件化框架实现组件之间传参的几种方式,并了解两个没有任何关系组件之间通信的通点 了解为了解决上述通点诞生的flux架构 了解 ...
- 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教程(四)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教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
- 【原】react+redux实战
摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...
- React Redux Sever Rendering实战
# React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](ht ...
- react+redux渲染性能优化原理
大家都知道,react的一个痛点就是非父子关系的组件之间的通信,其官方文档对此也并不避讳: For communication between two components that don't ha ...
- ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例
工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...
随机推荐
- 【转】php和java之间rsa加密互通
以下是php封装好的类,引入即可使用 <?php /** * 作者:pjp * 邮箱:vippjp@163.com */ class RSA{ private $privateKey='';// ...
- HDU 1452 Happy 2004(唯一分解定理)
题目链接:传送门 题意: 求2004^x的全部约数的和. 分析: 由唯一分解定理可知 x=p1^a1*p2^a2*...*pn^an 那么其约数和 sum = (p1^0+p1^1^-+p1^a1)* ...
- Memcache安装与使用
一.资源下载 安装memcached 之前必需要先安装 libevent 分别在libevent和memcached的官网下载安装包libevent-1.4.14b-stable.tar.gz和mem ...
- 设置Eclipse中properties文件打开方式myeclipse一样有source和properties两个视图方法
东北大亨: 说明:如果想在eclipse的properties文件打开的方式出现source和properties视图就需要添加JBossTools插件 下面介绍如果添加插件: 1.打开官网 http ...
- RedHat7 防火墙设置以及端口设置
1.查看防火墙状态,root用户登录,执行命令systemctl status firewalld 2.开启防火墙:systemctl start firewalld 3.关闭防火墙:systemct ...
- python 基础 4.1 函数的参数
#/usr/bin/python #coding=utf-8 #@Time :2017/10/24 9:09 #@Auther :liuzhenchuan #@File :函数的参数.py # ...
- HibernateTemplate方法的使用
1.查询帖子(Post)为例 查找所有的帖子 public List<Post> findPosts() { String hql = "from Post p left joi ...
- 【题解】quake
[题解]\(quake\) 题目大意 我们共有报酬\(f\)元,一条边有它的价值\(w_i\),有它的建造时间\(t_i\).要求建一些边,生成一颗树.求最大的利润率. 数据范围 \(n\le 400 ...
- pandas,apply并行计算的一个demo
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2018-10-11 17:55:26 # @Author : Sheldon (thi ...
- mysql服务器启动问题
The server quit without updating PID file (/usr/local/mysql/data/snsgou.pid);可能的情况是启动的用户不对,