明白React高阶组件（装潢器）

2024年3月18日 187次阅读 来源: unique丶J

首先在正式的高阶组件之前我们先来相识一下函数的相似操纵：

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

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

export default Hello

那末在这呢，不难发明实在组件也是一个函数，我们采用了同种头脑对其举行了一致的数据处理，在WrapperHello函数中传入的Comp组件，然后我们一致返回一个WrapComp函数，个中Comp在render的时刻我们传入和父级通报的一切props举行数据的悉数交互，然后再在Hello组件上我们用@标记举行一个浅易的写法，实际上就是和之前函数包裹一样的道理举行了一次声明，那末，我们末了输出的组件Hello，他的显现就会包含了我们高阶组件中的‘ <div >这是高阶组件特有的函数</div >’元素了。

高阶组件重要又分为属性代办和反向继续两种范例，上述举例中的函数就属于属性代办的范例。

反向继续的例子：

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

我们能够经由过程componentDidMount来修正原有组件生命周期发作的事宜，这就是反向继续的体式格局。

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

如果有好的建媾和题目请指出，感谢

    原文作者：unique丶J
    原文地址: https://segmentfault.com/a/1190000018473101
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞