ホームページ > 記事 > ウェブフロントエンド > 高次コンポーネントに反応する とはどういう意味ですか?
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 サイトの他の関連記事を参照してください。