react-高阶组件理解

运行效果 

第一版

import React, { Component } from 'react';
import SubLable from './SubLabel'
class MyLabel extends Component {
    render() {
        return (
          <SubLable/>
        );
      }
}

export default MyLabel;

import React, { Component } from 'react';
class SubLabel extends Component {
    constructor(){
        super();
        this.onFun = this.onFun.bind(this);
    }
    onFun(){
        alert('onfun');
    }
    render() {
        return (
          <div>
              dddddggg
              <button onClick={this.onFun}>button</button>
          </div>
        );
      }
}

export default SubLabel;

import App from './MyTest/MyLabel'

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

第二版

import React, { Component } from 'react';
import SubLable from './SubLabel'
// 复杂组件
class MyLabel extends Component {
    constructor(){
        super();
        this.onFun = this.onFun.bind(this);
    }
    onFun(){
        alert('onfun');
    }
    render() {
        return (
          <SubLable text="text" onfun={this.onFun}/>
        );
      }
}

export default MyLabel;

import React, { Component } from 'react';
// 傻瓜组件
class SubLabel extends Component {
    render() {
        const {text,onfun} = this.props;
        return (
          <div>
              {text}
              <button onClick={onfun}>{text}</button>
          </div>
        );
      }
}

export default SubLabel;

第三版：使用context传递数据

import React, { Component } from 'react';
import SubLable from './SubLabel'
import store from './Store'
import Provider from './Provider'
// 复杂组件
class MyLabel extends Component {
    constructor(){
        super();
        this.onFun = this.onFun.bind(this);
    }
    onFun(){
        alert('onfun');
    }
    render() {
        return (
            <Provider store={store}>
                <SubLable onfun={this.onFun}/>
            </Provider> 
        );
      }
}

export default MyLabel;

import React, { Component } from 'react';
import PropTypes from 'prop-types';
// 傻瓜组件
class SubLabel extends Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props, context){
        super(props, context);
    }
    render() {
        const {onfun} = this.props;
        return (
          <div>
              {this.context.store.text}
              <button onClick={onfun}>{this.context.store.text}</button>
          </div>
        );
      }
}
SubLabel.contextTypes = {
  store: PropTypes.object
}

export default SubLabel;

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

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
};

export default Provider;

const Store = {
    'text': 'text',
};

export default Store;

 

第四版:"..."表达式实验

import React, { Component } from 'react';
import SubLable from './SubLabel'
import store from './Store'
import Provider from './Provider'

const onFunF = () =>({
    onfun:()=> { alert("onfun");} 
})
// 复杂组件
class MyLabel extends Component {
    constructor(){
        super();
        this.onFun = this.onFun.bind(this);
    }
    onFun(){
        alert('onfun');
    }
    render() {
        return (
            <Provider store={store}>
                {/* <SubLable onfun={this.onFun}/> */}
                <SubLable {...onFunF()}/>
            </Provider> 
        );
      }
}

export default MyLabel;

第五版 

import React, { Component } from 'react';
import SubLable from './SubLabel'
import store from './Store'
import Provider from './Provider'

const onFunF = () =>({
    onfun:()=> { alert("onfun");} 
})
const onDataF =()=>({
    text:'text',
})
// 复杂组件
class MyLabel extends Component {
    constructor(props, context){
        super(props, context);
    }
    render() {
        return (
            <Provider store={store}>
                {/* <SubLable onfun={this.onFun}/> */}
                <SubLable {...onDataF()} {...onFunF()}/>
            </Provider> 
        );
      }
}

export default MyLabel;

import React, { Component } from 'react';
// 傻瓜组件
class SubLabel extends Component {
    render() {
        const {onfun,text} = this.props;
        return (
          <div>
              {text}
              <button onClick={onfun}>{text}</button>
          </div>
        );
      }
}

export default SubLabel;

第六版：高阶组件实验前奏

import React, { Component } from 'react';
import SubLable from './MSubLabel'
import store from './Store'
import Provider from './Provider'

// 复杂组件
class MyLabel extends Component {
    constructor(props, context){
        super(props, context);
    }
    render() {
        return (
            <Provider store={store}>
                <SubLable />
            </Provider> 
        );
      }
}

export default MyLabel;

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

const onFunF = () =>({
    onfun:()=> { alert("onfun");} 
})
const onDataF =(store)=>({
    text:store.text,
})
// 傻瓜组件
class MSubLabel extends Component {
    constructor(props, context){
        super(props, context);
    }
    render() {
        return (
            <SubLable {...onDataF(this.context.store)} {...onFunF()}/>
        );
      }
}
MSubLabel.contextTypes = {
    store: PropTypes.object
  }
export default MSubLabel;

import React, { Component } from 'react';
// 傻瓜组件
class SubLabel extends Component {
    render() {
        const {onfun,text} = this.props;
        return (
          <div>
              {text}
              <button onClick={onfun}>{text}</button>
          </div>
        );
      }
}


export default SubLabel;

const Store = {
    'text': 'text',
};

export default Store;

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

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
};

export default Provider;

第七版：高阶组件 

import React, { Component } from 'react';
//import SubLable from './MSubLabel'
import SubLable from './SubLabel'
import store from './Store'
import Provider from './Provider'

// 复杂组件
class MyLabel extends Component {
    constructor(props, context){
        super(props, context);
    }
    render() {
        return (
            <Provider store={store}>
                <SubLable />
            </Provider> 
        );
      }
}


export default MyLabel;

import React, { Component } from 'react';
import PropTypes from 'prop-types';
// 傻瓜组件
class SubLabel extends Component {
    render() {
        const {onfun,text} = this.props;
        return (
          <div>
              {text}
              <button onClick={onfun}>{text}</button>
          </div>
        );
      }
}


const onFunF = () =>({
  onfun:()=> { alert("onfun");} 
})
const onDataF =(store)=>({
  //text:store.text,
  text:'text',
})

const connect = (onDataF,onFunF) =>{
  return function(Sub){
      class MSubLabel extends Component {
          constructor(props, context){
              super(props, context);
          }
          render() {
            const store = this.context.store;
            const newProps={
              ...this.props,
              ...onDataF(store),
              ...onFunF()
            }
              return (
                  <Sub {...newProps} />
              );
            }
      };
      MSubLabel.contextTypes = {
          store: PropTypes.object
      } 
      return MSubLabel;  
  }
}

//export default SubLabel;
export default connect(onDataF,onDataF)(SubLabel);

const Store = {
    'text': 'text',
};

export default Store;

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

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
};

export default Provider;

弹窗弹不出来