高阶组件装饰器

高阶组件装饰器

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

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

高阶组件装饰器的相关文章

002_第三部分_[函数 / 高阶函数 / 装饰器]

一.高阶函数: 顺序排序 enumerate([1,2 ,3 , 4, 5]) for idx, item in enumerate([1, 2, 3, 4]):     print(idex)     print(item) def sort(*args):     ret = []     for item in args:         for i, v in enumerate(ret):             if item > v:                 ret.ins

python学习day07 高阶函数 装饰器 语法糖

语法糖对于计算机的运行并没有任何的好处,但是对于程序员的好处是很大的,方便我们写代码,所以称为糖 #******************************装饰器************************* # 装饰器本质上就是一个python函数,他可以让其他函数在不需要做任何代码变动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象. # 装饰器的应用场景:比如插入日志,性能测试,事务处理,缓存等等场景 import time def func1(): print('in f

修饰器&amp;高阶组件

一.修饰器 1.类的修饰 修饰器是一个函数,用来修改类的行为 function testable(target) { target.isTestable = true; } @testable class MyTestableClass { // ... } MyTestableClass.isTestable // true 注意: 修饰器函数的第一个参数,就是所要修饰的目标类 如果有多余参数,只能修饰器外面封装一层函数 function testable(isTestable) { retu

高阶组件

前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react组件,并返回一个新的组件. A higher-order component is a function that takes a component and returns a new component. 形如: const EnhancedComponent = higherOrderComp

react高阶组件的理解

[高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return function() { console.log('before say hello'); fn(); console.log('after say hello'); } } // hello 这时候等于 WrapperHello函数中返回的 匿名函数 // 在设计模式中这种操作叫做 装饰器模式 // 高

高阶组件简介

组件:class Hello extends React.Component{ render(){ return <h2>hello imooc i love react&redux</h2> } } 组件本质其实就是一个函数. 高阶组件: function WrapperHello(Comp){ class WrapComp extends React.Component{ render(){ return( <div> <p>这是高阶组件特有的元

【转】react的高阶组件

前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react组件,并返回一个新的组件. A higher-order component is a function that takes a component and returns a new component. 形如: const EnhancedComponent = higherOrderComp

React17React高阶组件的链式调用

使用情况如下: * 编写一个高阶组件进行属性的添加 * 编写一个高级组件编写生命周期 * 然后将以上两个高阶组件进行链式调用 示例 * 编写高阶组件进行属性的添加(返回的是函数组件): * 编写高阶组件重写生命周期(返回的是class组件): *链式调用 widthLearnReact为HOC组件添加了属性,widthLiseCycle为添加了属性的HOC组件重写了componentDidMount生命周期 注这种高阶组件链式调用太过麻烦,下篇随笔采用装饰器的语法处理这种问题. 原文地址:htt

react--context,高阶组件,hook

1,Context:不需要在任何组件间添加props方法,可以任意之间的组件树进行 const Context = React.createContext(); const Provider = Context.Provider; //提供者 const Consumer = Context.Consumer; //消费者 function App() { return ( <div className="App"> {/* <HomePag {...store} /