HOC 速習ガイド

この HOC 速習ガイドは、React と TypeScript を使用して高階コンポーネントを作成するための利用可能なすべての知識を収集しています。

当初は、HOC に関する公式ドキュメントに密接に従います。
хук が存在しますが、多くのライブラリやコードベースはまだ HOC の型を作成する必要があります。
レンダープロパティは将来検討される可能性があります。
目標は、邪魔にならずに型安全を提供する HOC を作成することです。

HOC が使用されるユースケースは数多くあります。たとえば、

HOC は、ユーザーの認証を確認してからレンダリングする、またはユーザーの役割に基づいてアクセスを制限するためにコンポーネントをラップできます。
HOC は、フィーチャーフラグまたは A/B テストに基づいてコンポーネントを条件付きでレンダリングできます。
HOC は、コンポーネントに翻訳機能を提供できます。
HOC は、コアロジックを変更せずにコンポーネントにロギングや分析追跡を追加できます。

すぐにコピーできる基本的な HOC の例を次に示します。

type PropsAreEqual<P> = (
  prevProps: Readonly<P>,
  nextProps: Readonly<P>
) => boolean;

const withSampleHoC = <P extends {}>(
  component: {
    (props: P): Exclude<React.ReactNode, undefined>;
    displayName?: string;
  },
  propsAreEqual?: PropsAreEqual<P> | false,

  componentName = component.displayName ?? component.name
): {
  (props: P): React.JSX.Element;
  displayName: string;
} => {

  function WithSampleHoc(props: P) {
    //Do something special to justify the HoC.
    return component(props) as React.JSX.Element;
  }

  WithSampleHoc.displayName = `withSampleHoC(${componentName})`;

  let wrappedComponent = propsAreEqual === false ? WithSampleHoc : React.memo(WithSampleHoc, propsAreEqual);

  //copyStaticProperties(component, wrappedComponent);

  return wrappedComponent as typeof WithSampleHoc
};

このコードは次の条件を満たしています。

コンポーネントが有効な要素を返せる (strings | array | boolean | null | number) だけではなく、React.JSX.Element | null も返せるようにします。
オプトアウトしない限り、メモにラップします。
ネストされたコンポーネントを削除するため、React 開発ツールには 1 つのコンポーネントのみが表示されます。
これは React 開発ツールに displayName を注釈付きで表示し、これが 2 つの HoC でラップされたコンポーネントであることを示します。
オプション: 元のコンポーネントで定義された静的プロパティをコピーします。