React の高次コンポーネント (デコレーター) の紹介 (コード例)

この記事は 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 を出力し、次に hello を出力します。 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

したがって、ここでは、コンポーネントが実際には関数であることを見つけるのは難しくなく、同じアイデアを使用して実行します。統合データ処理、Comp コンポーネントは WrapperHello 関数に渡され、その後、均一に WrapComp 関数を返します。この関数では、Comp がレンダリングされるときに、すべてのデータ相互作用に対して親から渡されたすべての props を渡し、次に Hello 関数に渡します。コンポーネント 上では、単純なステートメントを作成するために @ 記号を使用しています。実際、これは前の関数ラッパーと同じ原則に基づいた宣言です。その後、最終出力コンポーネント Hello の表示には、上位のコンポーネントに ' < が含まれます。 -orderComponent. ;p >高次コンポーネント特有の機能です

上位コンポーネントは主に プロパティ プロキシ と 逆継承 の 2 つのタイプに分けられ、例の関数はプロパティ プロキシのタイプに属します。

逆継承の例:

function WrapperHello (Comp) {
    class WrapComp extends Component {
        componentDidMount () {
            console.log('高阶组件新增的生命周期,加载完成')
        }
        
        render () {
            return (
                <Fragment >
                    <Comp { ...this.props }/>
                </Fragment >
            )
        }
    }
    
    return WrapComp
}

componentDidMount を使用して、元のコンポーネントのライフサイクルで発生するイベントを変更できます。これが逆継承の方法です。

高階関数は関数を返すので、それに応じてラップするだけであることに注意してください。

以上がReact の高次コンポーネント (デコレーター) の紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。