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}/>;
网友评论