高阶组件装饰器 演变过程如下:

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容