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

阅读剩余部分

相关阅读 >>

详解html5 postmessage解决跨域通信的问题

javascript中split和join的区别

了解javascript中的垃圾回收机制

javascript包括什么

vue.js框架怎么下载

微信端html5页面如何调用分享接口

js如何获取session中的值

h5混合开发app如何升级

html5缓存机制是什么?怎么更新缓存

javascript的三种注释方式是什么

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




打赏

取消

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

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

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

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

评论

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