mapStateToProps mapDispatchToProps 的使用

最新推荐文章于 2024-01-22 10:10:00 发布

邯郸达文西

最新推荐文章于 2024-01-22 10:10:00 发布

阅读量1.2k

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45881304/article/details/124634335

版权

本文详细介绍了如何在React应用中使用ReactConnect的mapStateToProps和mapDispatchToProps，展示了如何将Redux store的状态和操作映射到组件的props，以及它们在组件生命周期中的作用。同时，概述了connect高阶函数的工作原理和核心逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react connect的使用（mapStateToProps ，mapDispatchToProps）

1、举一个简单使用的例子话不多说之间贴代码

引入使用

import { connect } from 'react-redux';

UI组件

class Header extends Component {
    render() {
        let { collapsed, toggle } = this.props;
        return (
            <div>
            </div>
        )
    }
}

业务组件

let mapStateToProps = state => {
    return {
        collapsed: state.collapsed
    }
}

let mapDispatchToProps = dispatch => {
    return {
        toggle() {
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)

let mapStateToProps = (state,ownProps) => {
    return {
        collapsed: state.collapsed
    }
}

let mapDispatchToProps = (dispatch,ownProps) => {
    return {
        toggle() {
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)

2、那connect做了些什么呢？

在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
接收Redux的store作为props，通过context对象传递给子孙组件上的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;
    }
  }