高阶组件装饰器
注意利用函数式组件进行化简!
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
时间: 2024-10-07 15:02:01