当前位置: 首页 > Web前端 > HTML5

理解React高阶组件(装饰器)

时间:2023-04-05 15:31:01 HTML5

首先,我们先来了解一下函数在正式高阶组件之前的类似操作:functionhello(){console.log('hello')}functionWrapperHello(fn){returnfunction(){console.log('before')fn&&fn()console.log('after')}}hello=WrapperHello(hello)hello()上面代码的输出会先输出before,再输出hello,然后finally之后,hello函数相当于在外面包裹了一层统一的逻辑然后返回,声明就是覆盖原来的hello函数,这是高层组件的基本原理。然后让我们写一个基本的高级组件来进行比较:具体到高阶组件

)}}returnWrapComp}@WrapperHelloclassHelloextendsComponent{render(){return(
Hello
)}}exportdefaultHello那么到这里,不难发现组件其实是一个函数,我们用同样的思路对其进行统一的数据处理,将Comp组件传入WrapperHello函数,然后我们统一返回一个WrapComp函数,其中Comp在渲染的时候,我们传入所有parent传过来的props来和数据进行交互,然后我们用@符号在Hello组件上写一个简单的方法,其实就是wrapped和前面的函数一样,用同样的原理进行声明,那么,我们最终输出的组件Hello的显示,会在我们的high中包含'
Thisisafunctionspecifictohigh-levelcomponents
'这个元素级组件。高阶组件主要分为属性代理和反向继承两种。上述例子中的函数属于属性代理类型。反向继承示例:functionWrapperHello(Comp){classWrapCompextendsComponent{componentDidMount(){console.log('高阶组件新生命周期,加载完成')}render(){return()}}returnWrapComp}我们可以通过componentDidMount修改原组件生命周期中发生的事件,也就是反向继承的方式。请记住,高阶函数返回的是一个函数,我们只是相应地包装它。如果大家有好的建议和问题请指出,谢谢