この記事では、React の高次コンポーネントの概要と、高次コンポーネントの使い方について詳しく紹介します。
高次コンポーネントの定義
HoC は React の API に属さない実装パターンであり、本質的には 1 つ以上の React コンポーネントをパラメーターとして受け取り、変更する代わりに新しい React コンポーネントを返す関数です。既存のコンポーネントを上位コンポーネントと呼びます。開発プロセス中、一部の関数を複数のコンポーネント クラスで再利用する必要がある場合、Hoc を作成できます。
基本的な使い方
ラッピングメソッド
const HoC = (WrappendComponent) => { const WrappingComponent = (props) => ( <p className="container"> <WrappendComponent {...props} /> </p> ); return WrappingComponent; };
上記のコードでは、WrappendComponent がパラメータとして受け入れられ、レンダー内で p をラップし、それに className を与えます。最終結果は WrappingComponent と、渡された WrappendComponent という 2 つのまったく異なるコンポーネントです。
WrappingComponent では、WrappendComponent に渡される props を読み取り、追加、編集、削除できます。また、WrappendComponent を他の要素でラップして、カプセル化スタイルを実装したり、レイアウトを追加したり、その他の操作を行うこともできます。
組み合わせメソッド
const HoC = (WrappedComponent, LoginView) => { const WrappingComponent = () => { const {user} = this.props; if (user) { return <WrappedComponent {...this.props} /> } else { return <LoginView {...this.props} /> } }; return WrappingComponent; };
上記のコードには、WrappedComponent と LoginView という 2 つのコンポーネントがあります。ユーザーが受信 props に存在する場合は、WrappedComponent コンポーネントが通常どおり表示され、それ以外の場合は、ユーザーができるように LoginView コンポーネントが表示されます。ログイン。 HoC によって渡されるパラメータは複数にすることができます。たとえば、ユーザーがログインしているときにメイン ページが表示され、ユーザーがログインしていないときにログイン インターフェイスが表示されるように、複数のコンポーネントを渡します。リストをレンダリングするときは、List コンポーネントと Loading コンポーネントを渡して、新しいコンポーネントの動作を追加します。
継承メソッド
const HoC = (WrappendComponent) => { class WrappingComponent extends WrappendComponent { render() ( const {user, ...otherProps} = this.props; this.props = otherProps; return super.render(); } } return WrappingComponent; };
WrappingComponentは、WrappendComponentを継承し、親の機能とプロパティを共有する新しいコンポーネントです。 super.render() または super.componentWillUpdate() を使用して親のライフサイクル関数を呼び出すことができますが、これにより 2 つのコンポーネントが結合され、コンポーネントの再利用性が低下します。
React のコンポーネントのカプセル化は、利用可能な最小単位の考えに基づいています。理想的には、コンポーネントは 1 つのことだけを実行します。これは、OOP の単一責任の原則に沿っています。コンポーネントの機能を強化する必要がある場合は、元のコードを変更するのではなく、コンポーネントを組み合わせたり、コードを追加したりして、コンポーネントを強化します。
注意事項
レンダリング関数では高次コンポーネントを使用しないでください
render() { // 每一次render函数调用都会创建一个新的EnhancedComponent实例 // EnhancedComponent1 !== EnhancedComponent2 const EnhancedComponent = enhance(MyComponent); // 每一次都会使子对象树完全被卸载或移除 return <EnhancedComponent />; }
React の差分アルゴリズムは、古いサブオブジェクト ツリーと新しいサブオブジェクト ツリーを比較して、既存のサブオブジェクト ツリーを更新するか破棄するかを決定します。既存のサブツリーを削除し、マウントを再起動します。
静的メソッドはコピーする必要があります
// 定义静态方法 WrappedComponent.staticMethod = function() {/*...*/} // 使用高阶组件 const EnhancedComponent = enhance(WrappedComponent); // 增强型组件没有静态方法 typeof EnhancedComponent.staticMethod === 'undefined' // true
Refs 属性は渡すことができません
HoC で指定された ref はサブコンポーネントには渡されず、コールバック関数を通じて props を使用して渡す必要があります。
上記は私があなたのためにまとめたものです。
関連記事:
JSを使用してループするNodelist Domリストを実装する方法
以上がReact の高次コンポーネントの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。