内容简介:作用:连接当
作用:连接 React
组件与 Redux store
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
// 这个函数允许我们将 store 中的数据作为 props 绑定到组件上 const mapStateToProps = (state) => { return { count: state.count } }
-
这个函数的第一个参数就是
Redux
的store
,我们从中摘取了count
属性。你不必将state
中的数据原封不动地传入组件,可以根据state
中的数据,动态地输出组件需要的(最小)属性 -
函数的第二个参数
ownProps
,是组件自己的props
当 state
变化,或者 ownProps
变化的时候, mapStateToProps
都会被调用,计算出一个新的 stateProps
,(在与 ownProps merge
后)更新给组件
mapDispatchToProps(dispatch, ownProps): dispatchProps
connect
的第二个参数是 mapDispatchToProps
,它的功能是,将 action
作为 props
绑定到组件上,也会成为 MyComp
的 props
二、原理解析
首先 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
// 主要逻辑 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; } }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- React 组件模式-有状态组件 x 无状态组件、容器组件 x 展示组件、高阶组件 x 渲染回调(函数作为子组件)
- Serverless 组件开发尝试:全局变量组件和单独部署组件
- angular自定义组件-UI组件篇-switch组件
- React Hooks 源码解析(一):类组件、函数组件、纯组件
- Vue动态组件和异步组件
- Vue 动态组件 & 异步组件原理
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Compilers
Alfred V. Aho、Monica S. Lam、Ravi Sethi、Jeffrey D. Ullman / Addison Wesley / 2006-9-10 / USD 186.80
This book provides the foundation for understanding the theory and pracitce of compilers. Revised and updated, it reflects the current state of compilation. Every chapter has been completely revised ......一起来看看 《Compilers》 这本书的介绍吧!
Base64 编码/解码
Base64 编码/解码
html转js在线工具
html转js在线工具