クラス コンポーネントでフックを使用するためのヒント

React バージョン 16.8 以降、開発者のコミュニティは、利便性とシンプルなインターフェイスのためにフックを採用してきました。 useState や useEffect などの組み込みフックを使用すると、機能コンポーネントの状態を維持し、ライフサイクル メソッドを設定できます。

さらに重要なことは、多くのライブラリが、カスタム コンポーネントやクラス コンポーネントと互換性のあるユーティリティではなく、フックをサポートするようになったことです。 React クラス コンポーネントでフックを使用することは可能ですか?

開発者は依然としてカスタム フックの強力な機能を必要としていますが、それらを使用する別の方法を見つける必要があるかもしれません。 同じボートに乗っている場合は、クラス コンポーネントでのフックの使用に関するこのガイドに従ってください。

React クラス コンポーネントでフックを使用する

フックの導入以来、多くの React 開発者は、数十のクラス コンポーネントを関数コンポーネントにリファクタリングすることを決定しました。

アプリケーションに何百ものクラス コンポーネントが含まれている場合、これは不可能な場合があります。 リファクタリングには時間がかかりすぎます。

一部の開発者は、クラス構文を好み、関数コンポーネントを作成したくありません。

残念ながら、クラス コンポーネントはフックをサポートしておらず、それらの中でフックを使用する方法はありません。 クラス コンポーネント内でフックを利用する唯一の実用的な方法は、2 種類のコンポーネントを 1つのツリーに混在させることです。

理論的には、フックを使用すると、関数コンポーネントを使用して値を生成し、その値を props を介してクラス コンポーネントに渡すことができます。

React クラス コンポーネントでフックを使用する別の方法

これは、クラス コンポーネントでフックからの値を使用する簡単な例です。 例を見てみましょう。

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [number, setNumber] = useState(100);
  return (
    <div className="App">
      <Header hookValue={number}></Header>
    </div>
  );
}
class Header extends React.Component {
  render() {
    const someHookValue = this.props.hookValue;
    return <h1>{someHookValue}</h1>;
  }
}

useState フックをインポートして、数値に初期化された number 状態変数を作成します。

子コンポーネントは Header クラス コンポーネントです。 フックを使用して作成した number 状態変数を渡します。

次に、この値を子コンポーネントに表示します。 CodeSandbox のライブ デモ を自分で見てください。