学习React之简单实现connect函数

分析

1. 参数 connect函数会接收两个参数，这里称为mapStateToProps和mapDispatchToProps，也就是需要传递给组件store中的state和dispatch，而mapStateToProps和mapDispatchToProps同样也是两个函数，接收的参数分别是store中的state和dispatch
2. connect的返回值，由connect调用很容易就知道，connect返回一个函数，并且这个函数还要是一个高阶组件，因为这个函数还会接收一个组件作为参数
3. 那么这个返回的函数又要返回什么，既然connect函数的最终目的是将Redux Store中的状态和组件联系到一起，那么现在状态有了，也和组件联系到一起了，要怎么使用组件呢————返回这个组件就可以啦

简单实现

// connect的参数
// 参数一: 函数
// 参数二：函数
// 返回值：函数 => 高阶组件
import { PureCompontent } from 'react'
import store from '../store'
function connect(mapStateToProps, mapDispatchToProps) {
    return function (WrapCompontent) {
        class NewCompontent extends PureCompontent {
            constructor(props) {
                super(props)
            }
            render() {
                const stateObj = mapStateToProps(store.getState())
                const dispatchObj = mapDispatchToProps(store.dispatch)
                return <WrapCompontent {...this.props} {...stateObj} {...dispatchObj} />
            }
        }
        return NewCompontent
    }
}

对今天的学习做一个简单记录，理解的不对的地方还希望大佬指出。