Higher-order components decorator

Higher-order components decorator

 

 Note the use of functional components simplify!

import React from 'react';

//1 组件原型
class Reg extends React.Component{
    render(){
        return <_Reg service={service} />;
    }
}

//2 匿名组件
const Reg = class extends React.Component{
    render(){
        return <_Reg service={service} />;
    }
}

//3 提参数
function inject(Comp){
    return class extends React.Component{
        render(){
            return <Comp service={service} />;
        }
    }
}

//继续提参数
function inject(service,Comp){
    return class extends React.Component{
        render(){
            return <Comp service={service} />;
        }
    }
}

//4 props
function inject(obj,Comp){
    return class extends React.Component{
        render(){
            return <Comp {...obj} />;
        }
    }
}

//5 柯里化
function inject(obj){
    function wrapper(Comp){
        return class extends React.Component{
            render(){
                return <Comp {...obj} />;
            } 
        } 
    } 
    Return warpper; 
} 

// modification function simplification arrow + V1 
const = Inject obj => Comp => { 
    class {React.Component the extends 
        the render () { 
            return <obj Comp {...} />;
         } 
    } 
} 

// modification function simplification arrow + + simplified functional component V2 
const = Inject obj => Comp => {
     return () => <obj Comp {...} />;
 } 

// the finally 
const = Inject OVj => Comp => = The props> <obj Comp {...} />; 
const = Inject OVj => Comp => = The props> <obj Comp ... {{...}} The props />;