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开发】用curl向https发请求时的35号错误
放了个假发现以前写的程序的模拟登陆不管用了,中间输出,发现curl向https发请求时没有返回数据,输出错误信息,得到: curl_errno($ch) -----> 35 curl_error ...
- ios中实现对UItextField,UITextView等输入框的字数限制
本文转载至 http://blog.sina.com.cn/s/blog_9bf272cf01013lsd.html 2011-10-05 16:48 533人阅读 评论(0) 收藏 举报 1. ...
- 【BZOJ4373】算术天才⑨与等差数列 线段树+set
[BZOJ4373]算术天才⑨与等差数列 Description 算术天才⑨非常喜欢和等差数列玩耍.有一天,他给了你一个长度为n的序列,其中第i个数为a[i].他想考考你,每次他会给出询问l,r,k, ...
- Qt中的通用模板算法QtAlgorithms(qDeleteAll,qBinaryFind,qCountLeadingZeroBits,qPopulationCount,qFill,qSwap,qSort)
Qt在<QtAlgorithms>头文件中为我们提供了一系列的全局模板方法,这些模板方法主要用于容器操作,比如qDeleteAll().其在Qt中的声明如下: void qDeleteAl ...
- 【模板】P3806点分治1
[模板]P3806 [模板]点分治1 很好的一道模板题,很无脑经典. 讲讲淀粉质吧,很营养,实际上,点分治是树上的分治算法.根据树的特性,树上两点的路径只有一下两种情况: 路径经过根\((*)\) 路 ...
- SAP-Function_01
TH_POPUP –在特定用户屏幕上显示一个系统消息 1 . 函数WS_UPLOAD 功能﹕将TXT文件转换成SAP中的内表定义的数据表格文件 注意﹕1 函数将按参数 data_tab ...
- php 获取优酷视频的真实地址(2014.6月新算法)
上个礼拜发现优酷改版了,各种过滤优酷广告的插件都失效了,于是我百度了一下(谷歌也不能用了)发现优酷改算法了,在ckplayer论坛发现有人在6月25号发了个php 的优酷代理文件,下载下来发现,能用但 ...
- Python的pymysql模块
PyMySQL是在Python3.x版本中用于连接MySQL服务器的一个库,Python2中则使用MySQLDB. 1.基本语法 # 导入pymysql模块 import pymysql # 连接da ...
- MySQL——存储引擎
核心知识点 1.InnoDB:数据和索引存放在单独的文件,聚簇索引,行级锁,事务,MVCC 2.MyISAM: (1)缺点:不支持事务和表级锁,因为不支持表锁,锁颗粒比较大,因此适合只读和小文件. ( ...
- java开发环境搭建-1
安卓开发所需软件: JDK Eclipse Android-Sdk ADT 其中jdk的下载和安装,详细见http://www.cnblogs.com/zhuxiaohui/p/3620685.htm ...