React の高次コンポーネントの使用を開始する例を共有する

この記事ではReactの高階コンポーネントの紹介を中心に、高階コンポーネントとは何か、そして高階コンポーネントの使い方について詳しく紹介していきます。参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

高次コンポーネントの定義

HoCはReactのAPIに属さず、本質的には1つ以上のReactコンポーネントをパラメータとして受け取り、新しいReactコンポーネントを返す関数です。このようなコンポーネントは、既存のコンポーネントを改造するのではなく、高次コンポーネントと呼ばれます。開発プロセス中、一部の関数を複数のコンポーネント クラスで再利用する必要がある場合、Hoc を作成できます。

基本的な使い方

ラッピングメソッド

const HoC = (WrappendComponent) => {
 const WrappingComponent = (props) => (
  <p className="container">
   <WrappendComponent {...props} />
  </p>
 );
 return WrappingComponent;
};

上記のコードでは、WrappendComponentは、HoCで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の差分アルゴリズムは、古いサブオブジェクトツリーと新しいサブオブジェクトツリーを比較して、既存のサブオブジェクトを更新するかどうかを決定しますツリーを削除するか、既存の 1 つのサブツリーを破棄して再マウントします。

静的メソッドはコピーする必要があります

// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}
// 使用高阶组件
const EnhancedComponent = enhance(WrappedComponent);

// 增强型组件没有静态方法
typeof EnhancedComponent.staticMethod === 'undefined' // true

Refs属性を渡すことはできません

HoCで指定されたrefは子コンポーネントには渡されず、コールバック関数を通じてpropsを使用して渡す必要があります。関連する推奨事項: ストアを使用して通信コンポーネント間の通信のインスタンス チュートリアルを最適化する

通信コンポーネント間の通信

HTML タグと React コンポーネント_Html/CSS_WEB-ITNOSE を比較する

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