React中高阶组件的介绍-创新互联

本篇文章给大家带来的内容是关于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 (
                
                    

这是高阶组件特有的函数

) } } 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来修改原有组件生命周期发生的事件,这就是反向继承的方式。

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

以上就是React高阶组件(装饰器)的介绍(代码示例)的详细内容,更多请关注创新互联其它相关文章!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页标题:React中高阶组件的介绍-创新互联
分享路径:http://myzitong.com/article/epsso.html