浅谈React和Redux的连接react-redux


Posted in Javascript onDecember 04, 2017

之前一直在探索React相关的东西,手上有个SPA项目,于是准备上Redux试试水。Redux本身和React并没有之间的关联,它是一个通用Javscript App模块,用做App State的管理。要在React的项目中使用Redux,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react-redux,这两个库就不弄一起用了,而是说react-redux提供了一些封装,一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux。

之前仅通过Redux文档来了解react-redux,在一段时间的实践后准备翻一翻源代码,顺便做些相关的总结。我看的代码的npm版本为v4.0.0,也就是说使用的React版本是0.14.x。

react-redux提供两个关键模块:Provider和connect。

Provider

Provider这个模块是作为整个App的容器,在你原有的App Container的基础上再包上一层,它的工作很简单,就是接受Redux的store作为props,并将其声明为context的属性之一,子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到store。不过我们的组件通常不需要这么做,将store放在context里,是为了给下面的connect用的。

这个是Provider的使用示例:

// config app root
const history = createHistory()
const root = (
 <Provider store={store} key="provider">
  <Router history={history} routes={routes} />
 </Provider>
)

// render
ReactDOM.render(
 root,
 document.getElementById('root')
)

connect

这个模块是算是真正意义上连接了Redux和React,正好它的名字也叫connect。

先考虑Redux是怎么运作的:首先store中维护了一个state,我们dispatch一个action,接下来reducer根据这个action更新state。

映射到我们的React应用中,store中维护的state就是我们的app state,一个React组件作为View层,做两件事:render和响应用户操作。于是connect就是将store中的必要数据作为props传递给React组件来render,并包装action creator用于在响应用户操作时dispatch一个action。

好了,详细看看connect这个模块做了什么。先从它的使用来说,它的API如下:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps是一个函数,返回值表示的是需要merge进props的state。默认值为() => ({}),即什么都不传。

(state, props) => ({ }) // 通常会省略第二个参数

mapDispatchToProps是可以是一个函数,返回值表示的是需要merge仅props的actionCreators,这里的actionCreator应该是已经被包装了dispatch了的,推荐使用redux的bindActionCreators函数。

(dispatch, props) => ({ // 通常会省略第二个参数
 ...bindActionCreators({
  ...ResourceActions
 }, dispatch)
})

更方便的是可以直接接受一个对象,此时connect函数内部会将其转变为函数,这个函数和上面那个例子是一模一样的。

mergeProps用于自定义merge流程,下面这个是默认流程,parentProps值的就是组件自身的props,可以发现如果组件的props上出现同名,会被覆盖。

(stateProps, dispatchProps, parentProps) => ({
 ...parentProps,
 ...stateProps,
 ...dispatchProps
})

options共有两个开关:pure代表是否打开优化,详细内容下面会提,默认为true,withRef用来给包装在里面的组件一个ref,可以通过getWrappedInstance方法来获取这个ref,默认为false。

connect返回一个函数,它接受一个React组件的构造函数作为连接对象,最终返回连接好的组件构造函数。

然后几个问题:

  1. React组件如何响应store的变化?
  2. 为什么connect选择性的merge一些props,而不是直接将整个state传入?
  3. pure优化的是什么?

我们把connect返回的函数叫做Connector,它返回的是内部的一个叫Connect的组件,它在包装原有组件的基础上,还在内部监听了Redux的store的变化,为了让被它包装的组件可以响应store的变化:

trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = this.store.subscribe(::this.handleChange)
  this.handleChange()
 }
}

handleChange () {
 this.setState({
  storeState: this.store.getState()
 })
}

但是通常,我们connect的是某个Container组件,它并不承载所有App state,然而我们的handler是响应所有state变化的,于是我们需要优化的是:当storeState变化的时候,仅在我们真正依赖那部分state变化时,才重新render相应的React组件,那么什么是我们真正依赖的部分?就是通过mapStateToProps和mapDispatchToProps得到的。

具体优化的方式就是在shouldComponentUpdate中做检查,如果只有在组件自身的props改变,或者mapStateToProps的结果改变,或者是mapDispatchToProps的结果改变时shouldComponentUpdate才会返回true,检查的方式是进行shallowEqual的比较。

所以对于某个reducer来说:

export default (state = {}, action) => {
 return { ...state } // 返回的是一个新的对象,可能会使组件reRender
 // return state // 可能不会使得组件reRender
}

另外在connect的时候,要谨慎map真正需要的state或者actionCreators到props中,以避免不必要的性能损失。

最后,根据connect的API我们发现可以使用ES7 decorator功能来配合React ES6的写法:

@connect(
 state => ({
  user: state.user,
  resource: state.resource
 }),
 dispatch => ({
  ...bindActionCreators({
   loadResource: ResourceActions.load
  }, dispatch)
 })
)
export default class Main extends Component {

}

OK,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 #Javascript
深入浅出webpack之externals的使用
Dec 04 #Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 #Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 #Javascript
基于JSONP原理解析(推荐)
Dec 04 #Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 #Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 #Javascript
You might like
mysql 字段类型说明
2007/04/27 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python装饰器原理与用法分析
2018/04/30 Python
Numpy之random函数使用学习
2019/01/29 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
《哪吒闹海》教学反思
2014/02/28 职场文书
户外活动策划方案
2014/03/12 职场文书
法制宣传实施方案
2014/03/13 职场文书
校园安全演讲稿
2014/05/09 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书