首页 > 其他 > 详细

高阶组件装饰器

时间:2019-09-01 18:14:57      阅读:44      评论:0      收藏:0      [点我收藏+]

高阶组件装饰器

技术分享图片

 

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

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

 

高阶组件装饰器

原文:https://www.cnblogs.com/xiaoshayu520ly/p/11442822.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!