React の高次コンポーネントの詳細な紹介

この記事では、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リストを実装する方法

Vueでクリック後にテキストの色が変わる実装方法

Vueで別のページの背景色の設定を実装する方法-cli

vueで更新とタブ切り替えを実装

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