高阶组件装饰器

高阶组件装饰器

 注意利用函数式组件进行化简！

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

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

//变形 + 箭头函数化简 + 函数式组件化简 v2
const inject = obj => Comp => {
    return () => <Comp {...obj} />;
}

//finally
const inject = ovj => Comp => props =>  <Comp {...obj}/>;
const inject = ovj => Comp => props =>  <Comp {...obj} {...props}/>;