React高阶组件(装饰器)的介绍(代码示例)


本文摘自PHP中文网,作者不言,侵删。

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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函数进行了覆盖,这就是高阶组件的基础原理。

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

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 >’元素了。

阅读剩余部分

相关阅读 >>

javascript如何删除指定数组元素

什么是javascript事件模型

如何解决html5微信播放全屏问题

html页面自动清理js、css文件的缓存(自动添加版本号)_html/xhtml_网页制作

html5新增了哪些标签?

javascript中数组如何求和?常用方法介绍

node.js中package.json中库的版本号的介绍

html5标签选择方法指引

有关html5页面在iphonex适配问题

必会的移动端html5的基础知识点

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...