详解关于react-redux中的connect用法介绍及原理解析
关于react-redux的一个流程图
流程图
connect用法介绍
connect方法声明:
connect([mapstatetoprops], [mapdispatchtoprops], [mergeprops],[options])
作用:连接react组件与 redux store。
参数说明:
mapstatetoprops(state, ownprops) : stateprops
这个函数允许我们将 store 中的数据作为 props 绑定到组件上。
const mapstatetoprops = (state) => { return { count: state.count } }
(1)这个函数的第一个参数就是 redux 的 store,我们从中摘取了 count 属性。你不必将 state 中的数据原封不动地传入组件,可以根据 state 中的数据,动态地输出组件需要的(最小)属性。
(2)函数的第二个参数 ownprops,是组件自己的 props。有的时候,ownprops 也会对其产生影响。
当 state 变化,或者 ownprops 变化的时候,mapstatetoprops 都会被调用,计算出一个新的 stateprops,(在与 ownprops merge 后)更新给组件。
mapdispatchtoprops(dispatch, ownprops): dispatchprops
connect 的第二个参数是 mapdispatchtoprops,它的功能是,将 action 作为 props 绑定到组件上,也会成为 mycomp 的 props。
[mergeprops],[options]
不管是 stateprops 还是 dispatchprops,都需要和 ownprops merge 之后才会被赋给组件。connect 的第三个参数就是用来做这件事。通常情况下,你可以不传这个参数,connect 就会使用 object.assign 替代该方法。
[options] (object) 如果指定这个参数,可以定制 connector 的行为。一般不用。
原理解析
首先connect之所以会成功,是因为provider组件:
- 在原应用组件上包裹一层,使原来整个应用成为provider的子组件
- 接收redux的store作为props,通过context对象传递给子孙组件上的connect
那connect做了些什么呢?
它真正连接 redux 和 react,它包在我们的容器组件的外一层,它接收上面 provider 提供的 store 里面的 state 和 dispatch,传给一个构造函数,返回一个对象,以属性形式传给我们的容器组件。
关于它的源码
connect是一个高阶函数,首先传入mapstatetoprops、mapdispatchtoprops,然后返回一个生产component的函数(wrapwithconnect),然后再将真正的component作为参数传入wrapwithconnect,这样就生产出一个经过包裹的connect组件,该组件具有如下特点:
- 通过props.store获取祖先component的store
- props包括stateprops、dispatchprops、parentprops,合并在一起得到nextstate,作为props传给真正的component
- componentdidmount时,添加事件this.store.subscribe(this.handlechange),实现页面交互
- shouldcomponentupdate时判断是否有避免进行渲染,提升页面性能,并得到nextstate
- componentwillunmount时移除注册的事件this.handlechange
由于connect的源码过长,我们只看主要逻辑:
export default function connect(mapstatetoprops, mapdispatchtoprops, mergeprops, options = {}) { return function wrapwithconnect(wrappedcomponent) { class connect extends component { constructor(props, context) { // 从祖先component处获得store this.store = props.store || context.store this.stateprops = computestateprops(this.store, props) this.dispatchprops = computedispatchprops(this.store, props) this.state = { storestate: null } // 对stateprops、dispatchprops、parentprops进行合并 this.updatestate() } shouldcomponentupdate(nextprops, nextstate) { // 进行判断,当数据发生改变时,component重新渲染 if (propschanged || mapstateproducedchange || dispatchpropschanged) { this.updatestate(nextprops) return true } } componentdidmount() { // 改变component的state this.store.subscribe(() = { this.setstate({ storestate: this.store.getstate() }) }) } render() { // 生成包裹组件connect return ( <wrappedcomponent {...this.nextstate} /> ) } } connect.contexttypes = { store: storeshape } return connect; } }
connect使用实例
这里我们写一个关于计数器使用的实例:
component/counter.js
import react, {component} from 'react' class counter extends component { render() { //从组件的props属性中导入四个方法和一个变量 const {increment, decrement, counter} = this.props; //渲染组件,包括一个数字,四个按钮 return ( <p> clicked: {counter} times {' '} <button onclick={increment}>+</button> {' '} <button onclick={decrement}>-</button> {' '} </p> ) } } export default counter;
container/app.js
import { connect } from 'react-redux' import counter from '../components/counter' import actions from '../actions/counter'; //将state.counter绑定到props的counter const mapstatetoprops = (state) => { return { counter: state.counter } }; //将action的所有方法绑定到props上 const mapdispatchtoprops = (dispatch, ownprops) => { return { increment: (...args) => dispatch(actions.increment(...args)), decrement: (...args) => dispatch(actions.decrement(...args)) } }; //通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上 export default connect(mapstatetoprops, mapdispatchtoprops)(counter)
完整代码
github:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。