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高阶组件(装饰器)的介绍(代码示例)的具体内容,更多请关注百分百源码网其它相关文章!