react hoc

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';


class InputComponent extends Component {
    componentWillReceiveProps(){
    }
    render() {
      return <div>{this.props.name}</div>
    }
}
// function logProps (InputComponent) {
//     InputComponent.prototype.componentWillReceiveProps = function(nextProps){
//         console.log('current props' , this.props)
//         console.log('next props' , nextProps)
//     };
//     //污染原型链，不推荐
//     return InputComponent;
// }
function logProps (WrappedComponent) {
    return class extends Component {
        componentWillReceiveProps(nextProps) {
            console.log('current props' , this.props)
            console.log('next props' , nextProps)
        }
        render() {
            return <WrappedComponent {...this.props} />;
        }
    }
}
const EnhancedComponent = logProps(InputComponent)
let name = 'xxx'
setInterval(()=>{
    name += 'hahaha'
    ReactDOM.render(<EnhancedComponent name={name}/>, document.getElementById('root'));
},2000)

serviceWorker.unregister();

高阶函数对组件的封装，譬如多个组件大部分相同，只是需要局部变化，可通过高阶函数来进行封装处理。