react高阶组件装饰器

高阶组件装饰器

演变过程如下：

import React from 'react'
// 1 原始版本
class Reg extends React.Component{
    render(){
        return <_Reg service={service} />
    }
}

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

// 3 inject(Comp) 返回的是类定义，提出参数Comp
function inject(Comp){
    return class extends React.Component{
        render(){
            return <Comp service={service} />
        }
    }
} 

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

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

// 6 柯里化
function inject(obj){
    function wra(Comp){  // 这里可以再次简化 变成函数,返回函数定义
        return class extends React.Component{
            render(){
                return <Comp {...obj} />
            };
        };
    };
    return wra;  // 只是返回函数定义
}

// 7  
function inject(obj){
    return function wra(Comp){  
        return class extends React.Component{
            render(){
                return <Comp {...obj} />
            };
        };
    };
}

// 8 箭头函数
const inject = obj =>{
    return Comp => {  
        return class extends React.Component{
            render(){
                return <Comp {...obj} />
            };
        };
    };
}


// 9 箭头函数简化 
const inject = obj => Comp =>{  
        return class extends React.Component{
            render(){
                return <Comp {...obj} />
            };
        };
}

// 10 函数式组件简化
const inject = obj => Comp =>{
    return props => <Comp {...obj} />;
}

// 11 最终版
const inject = obj => Comp => props => <Comp {...obj} {...props}/>;