高阶组件装饰器

Posted 2022-09-20 xiaoshayu520ly

高阶组件装饰器

 

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

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