浅谈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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
原生js实现轮播图特效
May 04 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
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
python用plt画图时,cmp设置方法
2018/12/13 Python
Python3最长回文子串算法示例
2019/03/04 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
金融系应届毕业生求职信
2014/05/26 职场文书
音乐节策划方案
2014/06/09 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
2014最新实习证明模板
2014/10/02 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
计划生育工作总结2015
2015/04/03 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
python高温预警数据获取实例
2022/07/23 Python