美文网首页
高阶组件装饰器 演变过程如下:

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

作者: 一个被程序员耽误的厨师 | 来源:发表于2019-11-27 16:34 被阅读0次

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

相关文章

  • 高阶组件装饰器演变过程

    高阶组件装饰器 装饰器整个函数的演变过程如下: ** 注意利用函数式组件进行化简!** 新建src/utils.j...

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

    import React from 'react'// 1 原始版本class Reg extends React...

  • React高阶组件

    React高阶组件 在开始聊高阶组件之前我们先来看下高阶函数和高阶组件在形式上的差异: 一、什么是装饰器模式: 要...

  • ES7 装饰器模式的配置

    装饰器模式简介 在使用 React 框架编程中,我们用高阶组件的时候,使用时往往需要用高阶组件函数包裹当前组件来导...

  • 十足干货|Python装饰器的从入门到高阶用法详解 !

    . 目录如下 装饰器语法糖入门用法:日志打印器入门用法:时间计时器进阶用法:带参数的函数装饰器高阶用法:不带参数的...

  • 一篇文章搞懂装饰器所有用法(建议收藏)

    本文的目录如下:装饰器语法糖入门用法:日志打印器入门用法:时间计时器进阶用法:带参数的函数装饰器高阶用法:不带参数...

  • 装饰器

    [TOC] 函数 函数定义 函数调用 高阶函数 嵌套函数 装饰器 装饰器=高阶函数+嵌套函数 基础装饰器 假设有一...

  • React组件化(二)高阶组件、装饰器、复合组件

    高阶组件 定义:是一个函数,它接收一个组件并返回另一个组件基本使用 装饰器 先安装 git add .git co...

  • Python装饰器

    Python装饰器 装饰器的本质是什么? 装饰器等价于高阶函数,形如myfunc=decorator(myfunc...

  • ts中使用高阶组件

    在TS中,编译器会对装饰器作用的值做签名一致性检查,而我们在高阶组件中一般都会返回新的组件,并且对被作用的组件的 ...

网友评论

      本文标题:高阶组件装饰器 演变过程如下:

      本文链接:https://www.haomeiwen.com/subject/toopwctx.html