高次コンポーネントに反応する とはどういう意味ですか?

React では、上位コンポーネントは関数であり、これはコンポーネント ロジックを再利用するための高度なテクノロジであり、上位コンポーネントはコンポーネントをパラメータとして受け入れ、新しいコンポーネントを返すために使用されます。コンポーネントが使用するコンポーネントに渡されるコンポーネントはサブコンポーネントとして機能し、プロパティ プロキシと逆継承を使用して上位コンポーネントを実装できます。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

反応上位コンポーネントの意味

上位コンポーネントは、コンポーネントをパラメータとして受け取り、新しいコンポーネントを返す関数 (コンポーネントではありません) です。この新しいコンポーネントは、子コンポーネントとして渡したコンポーネントを使用します - React.js Little Book から引用

高次コンポーネントは、コンポーネント ロジックを再利用するための React の高度なテクノロジです。 HOC 自体は React API の一部ではありません。これらは、React の概念の本質から現れたパターンです。

私たちのプロジェクトで React-redux フレームワークを使用する場合、接続という概念がありますが、ここでの接続は実際には上位コンポーネントです。また、react-router-dom の withRouter と同様の概念も含まれています。

単純な hoc の構築

function hello (){
    console.log("hello i  love react ")
}
function hoc(fn){
    return ()=>{
          console.log("first");
          fn();
          console.log("end");
    }
}
hello = hoc(hello);
hello();

上位コンポーネントを実装するメソッド

上位コンポーネントを実装するには、

• 属性プロキシという 2 つの方法があります。高次コンポーネントは、ラップされた React コンポーネントを通じて props

• 逆継承を操作します。上位コンポーネントは、ラップされた React コンポーネントを継承します。

次に、これら 2 つのメソッドを個別に説明します。

属性プロキシ

属性プロキシは、React における一般的な上位コンポーネントの実装メソッドです。例を通して説明します:

import React,{Component} from 'react';
const MyContainer = (WraooedComponent) => 
    class extends Component {
        render(){
            return <WrappedComponent {...this.props} />
        }
    }

ここから 最も重要な点は、render メソッドが WrappedComponent に渡された React コンポーネントを返すことです。このようにして、上位コンポーネントを介して props を渡すことができます。この方法は属性プロキシと呼ばれます。

当然のことながら、上位コンポーネント MyContainer の使用が非常に簡単になります。

import React,{Component} from 'react';
class MyComponent extends Component{
    //...
}
export default MyContainer(MyComponent);

このようにして、コンポーネントをレイヤーごとにパラメーターとして呼び出すことができ、元のコンポーネントを呼び出すことができます。 has high-order コンポーネントがそれを変更します。非常にシンプルで、使いやすさを維持しながら単一コンポーネントのカプセル化を維持します。もちろん、デコレータを使用して変換することもできます。

プロパティ プロキシを使用して上位コンポーネントを構築する場合、呼び出しの順序はミックスインとは異なります。ライフサイクルを実行する上記のプロセスは、スタック呼び出しに似ています。

didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount

逆継承

高次のコンポーネントを構築する別の方法は、文字通り逆継承と呼ばれます。意味からすると相続に関係するものでしょう。簡単な実装も見てみましょう。

const MyContainer = (WrappedComponent)=>{
    class extends WrappedComponent {
        render(){
            return super.render();
        }
    }
}

上記のコード。上位コンポーネントによって返されるコンポーネントは、WrappedComponent を継承します。 WrappedComponent は受動的に継承されるため、すべての呼び出しが逆になります。これがこのメソッドの起源でもあります。

このメソッドは属性プロキシと同じではありません。 WrappedComponentを継承して実装されており、スーパー経由でメソッドを順次呼び出すことができます。それは継承メカニズムに依存しているためです。 HOC の呼び出し順序は queue の呼び出し順序と同じです。

didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)

逆継承方式では、WrappedComponentを使って上位コンポーネントを参照できるため、WrappedComponentのstateやpropsを利用することができます。ライフサイクルとレンダリングメソッド。ただし、完全なサブコンポーネント ツリーが解析されることは保証されません。これには 2 つの大きな特徴があり、それについては以下で説明します。

レンダリング ハイジャック

レンダリング ハイジャックとは、上位コンポーネントが WrappedComponent のレンダリング プロセスを制御し、さまざまな結果をレンダリングできることを意味します。このプロセスでは、React 要素の出力結果内の props を読み取り、追加、変更、削除したり、React 要素ツリーや条件付き表示を読み取りまたは変更したりできます。または、要素ツリーをスタイルでラップします。

コントロール状態

上位コンポーネントは、WrappedComponent インスタンス内の状態を読み取り、変更、削除でき、必要に応じて、これも行うことができます。状態を追加します。

コンポーネントの命名

上位コンポーネントをラップすると、元の WrappedComponent の displayName が失われます。コンポーネント名は、開発と開発を容易にする重要な属性です。デバッグ中。

コンポーネント パラメーター

高次コンポーネントを呼び出すときに、いくつかのパラメーターを渡す必要がある場合がありますが、これは非常に簡単な方法で実現できます。

import React from 'react'
function HOCFactoryFactory(...params){
    return function HOCFactory(WrappedComponent){
        return class HOC extends Component{
            render(){
                return <WrappedComponent {...this.props} />
            }
        }
    }
}

これを使用する場合は、次のように記述できます。

HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)class WrappedComponent extends React.Component{}

これも関数型プログラミングの特性を利用しています。 React の抽象化の過程で、その影が随所に見られることがわかります。

推奨される学習: 「react ビデオ チュートリアル 」

以上が高次コンポーネントに反応する とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。