理解React高阶组件（装饰器）

frank_fun 发布于2019-08-26 13:36 / 3519人阅读

摘要：高阶组件主要又分为属性代理和反向继承两种类型，上述举例中的函数就属于属性代理的类型。记住，高阶函数返回的是一个函数，我们只是对其进行了相对应的包装。

首先在正式的高阶组件之前我们先来了解一下函数的类似操作：

function hello () {
    console.log("hello")
}

function WrapperHello (fn) {
    return function () {
        console.log("before")
        fn && fn()
        console.log("after")
    }
}

hello = WrapperHello(hello)

hello()

以上这段代码的输出会先输出before，然后 hello，最后再是after，hello函数相当于在外包裹了一层统一逻辑再进行了返回，并且声明是又将原本的hello函数进行了覆盖，这就是高阶组件的基础原理。

然后我们再写一个基础的高阶组件对比一下：

import React, { Component, Fragment } from "react"

function WrapperHello (Comp) {
    class WrapComp extends Component {
        render () {
            return (
                
                    这是高阶组件特有的函数
                    
                
            )
        }
    }
    
    return WrapComp
}

@WrapperHello
class Hello extends Component {
    render () {
        return (
            Hello
        )
    }
}

export default Hello

那么在这呢，不难发现其实组件也是一个函数，我们采用了同种思想对其进行了统一的数据处理，在WrapperHello函数中传入的Comp组件，然后我们统一返回一个WrapComp函数，其中Comp在render的时候我们传入和父级传递的所有props进行数据的全部交互，然后再在Hello组件上我们用@符号进行一个简易的写法，实际上就是和之前函数包裹一样的原理进行了一次声明，那么，我们最后输出的组件Hello，他的显示就会包括了我们高阶组件中的‘

这是高阶组件特有的函数

’元素了。

高阶组件主要又分为属性代理和反向继承两种类型，上述举例中的函数就属于属性代理的类型。

反向继承的例子：

function WrapperHello (Comp) {
    class WrapComp extends Component {
        componentDidMount () {
            console.log("高阶组件新增的生命周期,加载完成")
        }
        
        render () {
            return (
                
                    
                
            )
        }
    }
    
    return WrapComp
}

我们可以通过componentDidMount来修改原有组件生命周期发生的事件，这就是反向继承的方式。

记住，高阶函数返回的是一个函数，我们只是对其进行了相对应的包装。

如果有好的建议和问题请指出，谢谢

GPU云服务器云服务器高阶组件装饰器装饰器模式多个装饰器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109143.html

装饰者模式的应用：react高阶组件和ES6 装饰器

摘要：装饰者模式参与者装饰者和被装饰者共同的父类，是一个接口或者抽象类，用来定义基本行为定义具体对象，即被装饰者抽象装饰者，继承自，从外类来扩展。三装饰器高阶组件可以看做是装饰器模式在的实现。一装饰者模式优先使用对象组合而不是类继承。 --《设计模式》 1.什么是装饰者模式定义：动态的给对象添加一些额外的属性或行为。相比于使用继承，装饰者模式更加灵活。 2.装饰者模式参与者 Co...

YuboonaZhang 2019-08-26 13:24 评论0 收藏0
React复习进阶 - 高阶组件的使用/配置装饰品模式/新版context的使用

摘要：所谓高阶组件即使是接受一个组件作为参数返回一个新组件的函数用于提高组件的自身能力提高组件复用性普通高阶组件函数将父级属性向下传递并追加新属性为添加样式和木偶组件传入一个组件返回一个函数式组件高阶组件木偶组件我是本体是同样还可以为增加生命周期所谓高阶组件即使是接受一个组件作为参数, 返回一个新组件的函数, 用于提高组件的自身能力, 提高组件复用性 1.普通高阶组件 HOC函数将父级属性...

canger 2019-08-23 18:12 评论0 收藏0
动手写个React高阶组件

摘要：作用是给组件增减属性。如果你的高阶组件不需要带参数，这样写也是很的。那么需要建立一个引用可以对被装饰的组件做羞羞的事情了，注意在多个高阶组件装饰同一个组件的情况下，此法并不奏效。你拿到的是上一个高阶组件的函数中临时生成的组件。是什么简称HOC，全称 High Order Component。作用是给react组件增减props属性。怎么用为什么不先说怎么写？恩，因为你其实已经用...

xiaokai 2019-08-22 18:14 评论0 收藏0