码迷,mamicode.com
首页 > 其他好文 > 详细

高阶组件装饰器

时间:2019-09-01 19:01:31      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:png   技术   col   wrapper   inf   service   mic   div   function   

高阶组件装饰器

技术图片

 

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

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

 

高阶组件装饰器

标签:png   技术   col   wrapper   inf   service   mic   div   function   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!