react-高阶组件-实验-Provider传递数据

第一版代码-在高阶函数中provider传递数据成功

import App from './mytest5/my'

ReactDOM.render(<App />, document.getElementById('root'));

import React, { Component } from 'react';
import PropTypes from 'prop-types';
// provider 实验
class My extends Component{
    render(){
        return <Provider store={store} ><MyC/></Provider>
    }
}
class MyASub extends Component{
    // eslint-disable-next-line no-useless-constructor
    constructor(props){
        super(props);
    }
    render(){
        return <div>
            <p>my:</p>
            <p>sx1:{this.props.sx1}</p>
            </div>;
    }   
}

const connect=()=>{
    return function(MyASub1){
        class MyA extends Component{
            // eslint-disable-next-line no-useless-constructor
            constructor(props, context){
                super(props, context);
            }
            render(){
                const store = this.context.store;
                return<MyASub1 sx1={store.sx1}/>
            }
        }
        MyA.contextTypes = {
            store: PropTypes.object
        }
        return MyA;
    }
}
class MyB extends Component{
    render(){
        const MyA = connect()(MyASub);
        return<MyA/>
    }
}
class MyC extends Component{
    render(){
        return<MyB/>
    }
}


class Provider extends Component {
    constructor(props){
        super(props);
        this.store = props.store;
    }
  getChildContext() {
    return {
      store: this.store
    };
  }

  render() {
    return this.props.children;
  }

}

const store = {
    sx1:'text',
    sx2:5
}

Provider.childContextTypes = {
  store: PropTypes.object
};

export default My;

第二版-模拟connect使用（略处了redux的流程）

import App from './mytest5/my'

ReactDOM.render(<App />, document.getElementById('root'));

import React, { Component } from 'react';
import PropTypes from 'prop-types';
// provider 实验
class My extends Component{
    render(){
        return <Provider store={store} ><MyC/></Provider>
    }
}

class MyASub extends Component{
    // eslint-disable-next-line no-useless-constructor
    constructor(props){
        super(props);
    }
    render(){
        return <div>
            <p>my:高阶组件</p>
            <p>sx1:{this.props.sx1}</p>
            <p>sx1:{this.props.sx2}</p>
            <p><button onClick={this.props.fun1}>{this.props.sx1}</button></p>
            <p><button onClick={this.props.fun2}>{this.props.sx2}</button></p>
            </div>;
    }   
}
const fun1=()=>{
    alert('fun1');
}
const fun2=()=>{
    alert('fun2');
}

const mapStateToProps=()=>({
    sx1:'shuxing1',
    sx2:'shuxing2'
});
const mspDispatchToProps=()=>({
    fun1:fun1,
    fun2:fun2 
});
/*
传入什么？mapStateToProps,mspDispatchToProps
mapStateToProps 是数据，State变成的数据
mspDispatchToProps 是函数，准备给傻瓜控件调用的函数
把这两个封装改store;供傻瓜控件调用
this.props.x
这里的x有两类一类是数据，一类是函数，都是由傻瓜控件调用的
这两个函数会创建两类对象，然后保存给store,然后只能控件再在store中把这两个对象取出。
*/
const connect=(mapStateToProps,mspDispatchToProps)=>{
    return function(MyASub1){
        class MyA extends Component{
            // eslint-disable-next-line no-useless-constructor
            constructor(props, context){
                super(props, context);
                //this.context.store.state = mapStateToProps;
                //this.context.state.dispatch = mspDispatchToProps;
            }
            render(){
                //const store = this.context.store;
                const newProps={
                    ...this.props,
                    ...mapStateToProps(),
                    ...mspDispatchToProps()
                }
                return<MyASub1 {...newProps}/>
            }
        }
        MyA.contextTypes = {
            store: PropTypes.object
        }
        return MyA;
    }
}

class MyB extends Component{
    render(){
        const MyA = connect(mapStateToProps,mspDispatchToProps)(MyASub);
        return<MyA/>
    }
}
class MyC extends Component{
    render(){
        return<MyB/>
    }
}


class Provider extends Component {
    constructor(props){
        super(props);
        this.store = props.store;
    }
  getChildContext() {
    return {
      store: this.store
    };
  }

  render() {
    return this.props.children;
  }

}

var store = {
    date:{
        sx1:'text',
        sx2:5,
    },
    desptch:{
        fun1:null,
        fun2:null,
    }
}

Provider.childContextTypes = {
  store: PropTypes.object
};

export default My;