React高阶组件（装饰器）的介绍（代码示例）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了React高阶组件（装饰器）的介绍（代码示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1905字，纯文字阅读大概需要3分钟。

内容图文

本篇文章给大家带来的内容是关于React高阶组件（装饰器）的介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

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 (
                <Fragment >
                    <p >这是高阶组件特有的函数</p >
                    <Comp { ...this.props }/>
                </Fragment >
            )
        }
    }
    
    return WrapComp
}

@WrapperHello
class Hello extends Component {
    render () {
        return (
            <p >Hello</p >
        )
    }
}

export default Hello

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

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

反向继承的例子：

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

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

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

以上就是React高阶组件（装饰器）的介绍（代码示例）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的React高阶组件（装饰器）的介绍（代码示例）全部内容，希望文章能够帮你解决React高阶组件（装饰器）的介绍（代码示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---