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总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...
随机推荐
- 2015年多校联合训练第一场OO’s Sequence(hdu5288)
题意:给定一个长度为n的序列,规定f(l,r)是对于l,r范围内的某个数字a[i],都不能找到一个相应的j使得a[i]%a[j]=0.那么l,r内有多少个i,f(l,r)就是几. 问全部f(l,r)的 ...
- 五个知识体系之-SQL语句大全
一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...
- 关于EasyRTSPClient、EasyPlayer RTSP流重连问题的解释
EasyPlayer.EasyRTSPClient是如何设计重连的 首先大概解释一下EasyRTSPClient与EasyPlayer间的关系:EasyRTSPClient是一个专门用于与RTSP流媒 ...
- 题解 P1001 【A+B Problem】
#include<iostream> using namespace std; #define I int a,b; #define AK cin>>a>>b; # ...
- CentOS 7 安装、配置、使用 PostgreSQL 9.5(一)安装及基础配置
一直不知道怎么读这个数据库的名字,在官网上找到了文档.PostgreSQL is pronounced Post-Gres-Q-L. 读音 What is PostgreSQL? How is it ...
- JavaScript学习笔记(持续更新)
函数有“定义式”和“变量式”两种写法的区别 函数有“定义式”和“变量式”两种写法,两者基本区别不大.主要区别在于,如果在同一个代码块(Script标签对)定义两个同名的函数,浏览器在预编译代码时,使用 ...
- web项目中从不同的路径读取文件
项目中的配置文件可以放在classpath下,webapp下获取其他任何一个指定的绝对地址,读取这些文件就从这三个地方去找.主要代码如下: private List<String> get ...
- Java for LeetCode 104 Maximum Depth of Binary Tree
Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...
- 微信小程序上传项目到github
Step1:点击使用版本控制 点击开发工具右上角的版本控制按钮 Step2:点击初始化本地仓库: 等待初始化结束 Step3:在github新建仓库 Step4: 配置git用户密码或ssh: Ste ...
- 基础 PHP 语法
PHP 脚本在服务器上执行,然后向浏览器发送回纯 HTML 结果. 基础 PHP 语法 PHP 脚本可放置于文档中的任何位置. PHP 脚本以 <?php 开头,以 ?> 结尾: < ...