react-redux的connect的原理是什么？

类组件写法：

import {PureComponent} from "react";
import {StoreContext} from "./storeContext";

export default function connect(mapStateToProps, mapDispatchToProps) {
    // 返回一个高阶组件而不是直接一个jsx
    return function (Component) {
        class EnhanceComponent extends PureComponent {
            constructor(props, context) {
                super(props);
                this.state = mapStateToProps(context.getState())
            }

            componentDidMount() {
                this.unsubscribe = this.context.subscribe(() => {
                    this.setState(mapStateToProps(this.context.getState()))
                })
            }

            componentWillUnmount() {
                this.unsubscribe()
            }

            render() {
                // 定义要返回的属性和函数
                const data = mapStateToProps(this.context.getState())
                const dispatchFns = mapDispatchToProps(this.context.dispatch)
                return <Component {...this.props} {...data} {...dispatchFns}/>
            }
        }

        EnhanceComponent.contextType = StoreContext
        return EnhanceComponent
    }
}

 

函数式组件写法：

import {useContext, useEffect, useState} from "react";
import {StoreContext} from "./storeContext";

/**
 * connect到底做了什么？
 * 1.把组件想要的store数据放到组件上面
 * 2.把组件想要的方法放到组件上面
 * 3.一旦store发生改变，涉及到的组件会进行页面的更新
 */
const connect1 = (mapStateToProps, mapDispatchToProps) => {
    return Component => {
        return props => {
            const context = useContext(StoreContext)
            const [, setState] = useState(context.getState())

            const data = mapStateToProps(context.getState()) // 1.想要的数据
            const dispatchFns = mapDispatchToProps(context.dispatch) // 2.想要的调用action的方法

            useEffect(() => {
                const unsubscribe = context.subscribe(() => { // 3.想要的响应式效果
                    setState(mapStateToProps(context.getState()))
                })
                return () => unsubscribe()
            }, [])

            return <Component {...props} {...data} {...dispatchFns}/>
        }
    }
}
export default connect1

目录结构及Context：

 

 

使用：