這篇文章帶給大家的內容是關於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 >這是高階元件特有的函數
'元素了。高階元件主要又分為屬性代理和反向繼承兩種類型，舉例中的函數就屬於屬性代理的類型。
反向繼承的例子：
function WrapperHello (Comp) {
class WrapComp extends Component {
componentDidMount () {
console.log('高阶组件新增的生命周期,加载完成')
}
render () {
return (
<Fragment >
<Comp { ...this.props }/>
</Fragment >
)
}
}
return WrapComp
}我們可以透過componentDidMount來修改原有元件生命週期發生的事件，這就是反向繼承的方式。
記住，高階函數傳回的是一個函數，我們只是對其進行了相對應的包裝。
#以上是React高階元件（裝飾器）的介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
