react-高阶组件简单实验

第一版-高阶函数雏形

代码 

import App from './MyTest2/Mylabal'

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

//import {Component} from 'react';
import React, { Component } from 'react';

class MyA extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return<p>dd:{this.props.zhi}
        <button onClick={this.props.onFun}>myBut</button>
        </p>;
    }
}

const onFun = ()=>{
    alert('alert');
}


const fun = (zhi,fun)=>{
    return(
        function(Mysub){
            class MyB extends Component{
                render(){
                    return<Mysub zhi={zhi} onFun={fun}/>;
                }
            }
            return MyB;
        }
    );
}


class MyLabal extends Component {
    render() {
        const Myl = fun('hhh',onFun)(MyA);
        return <div>ddddd
            <Myl/>
        </div>;
    }
}



export default MyLabal;

运行

第二版 - 高阶函数

代码

import App from './MyTest2/Mylabal'

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

//import {Component} from 'react';
import React, { Component } from 'react';

class MyA extends Component{
    constructor(props){
        super(props);
        alert(props);
    }
    render(){
        return<p>dd:{this.props.zhi}
        <button onClick={this.props.onFun}>myBut</button>
        </p>;
    }
}

const onFun = ()=>{
    alert('alert');
}

const mapStateToProps=()=>({
    zhi:'zhijjj'
});
const mspDispatchToProps=()=>({
    onFun:onFun,
});


const fun = (mapState,mspDispatch)=>{
    return(
        function(Mysub){
            class MyB extends Component{
                render(){
                    //return<Mysub {...mapState()} onFun={fun}/>;
                    return<Mysub {...mapState()} {...mspDispatch()}/>;
                }
            }
            return MyB;
        }
    );
}


class MyLabal extends Component {
    render() {
        const Myl = fun(mapStateToProps,mspDispatchToProps)(MyA);
        return <div>ddddd
            <Myl/>
        </div>;
    }
}



export default MyLabal;

第三版本（Provider+store+context） 

代码

import App from './MyTest2/Mylabal'

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

//import {Component} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyA extends Component{
    constructor(props, context){
        super(props, context);
    }
    render(){
        return<p>dd:{this.props.zhi}store:{this.context.store.shuxing1}
        <button onClick={this.props.onFun}>myBut</button>
        </p>;
    }
}
MyA.contextTypes = {
    store: PropTypes.object
  }

const onFun = ()=>{
    alert('alert');
}

const mapStateToProps=()=>({
    zhi:'zhijjj'
});
const mspDispatchToProps=()=>({
    onFun:onFun,
});


const fun = (mapState,mspDispatch)=>{
    return(
        function(Mysub){
            class MyB extends Component{
                render(){
                    //return<Mysub {...mapState()} onFun={fun}/>;
                    return<Mysub {...mapState()} {...mspDispatch()}/>;
                }
            }
            return MyB;
        }
    );
}
class Provider extends Component{
    constructor(props){
        super(props);
        this.store = props.store;
    }
  getChildContext() {
    return {
      store: this.store
    };
  }

  render() {
    return this.props.children;
  }
}
Provider.childContextTypes = {
    store: PropTypes.object
};

const store = {
    shuxing1: 'text',
    shuxing2:5
};


class MyLabal extends Component {
    render() {
        const Myl = fun(mapStateToProps,mspDispatchToProps)(MyA);
        return <Provider store={store}>
            <div>ddddd
            <Myl/>
        </div>
            </Provider>;
    }
}



export default MyLabal;

第四版-store传递 数据成功

import App from './MyTest2/Mylabal'

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

//import {Component} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyA extends Component{
    // eslint-disable-next-line no-useless-constructor
    constructor(props, context){
        super(props, context);
    }
    render(){
        return<p>
            <p>store 属性1:{this.context.store.shuxing1}属性2:{this.context.store.shuxing2}</p>
            <p>props 属性1:{this.props.shuxing1}属性2:{this.props.shuxing2}</p>
            <p><button onClick={this.props.onFun}>myBut</button></p>
        </p>;
    }
}
MyA.contextTypes = {
    store: PropTypes.object
  }

const onFun = ()=>{
    alert('alert');
}

const mapStateToProps=(state)=>({
    shuxing1:state.shuxing1,
    shuxing2:state.shuxing2
});
const mspDispatchToProps=()=>({
    onFun:onFun,
});


const fun = (mapState,mspDispatch)=>{
    return(
        function(Mysub){
            class MyB extends Component{
                // eslint-disable-next-line no-useless-constructor
                constructor(props, context){
                    super(props, context);
                }
                render(){
                    const store = this.context.store;
                    return<Mysub {...mapState(store)} {...mspDispatch()} />;
                }
            }
            MyB.contextTypes = {
                store: PropTypes.object
            }
            return MyB;
        }
    );
}
class Provider extends Component{
    constructor(props){
        super(props);
        this.store = props.store;
    }
  getChildContext() {
    return {
      store: this.store
    };
  }

  render() {
    return this.props.children;
  }
}
Provider.childContextTypes = {
    store: PropTypes.object
};

const store = {
    shuxing1:'text',
    shuxing2:5
};

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


class MyLabal extends Component {
    render() {
        return <Provider store={store}>
                <MyC/>
            </Provider>;
    }
}

export default MyLabal;