React フックを既存の React クラス コンポーネントに統合する

お気づきのように、React フックは、状態とロジックを管理するための代替アプローチを提供します。アプリケーションに反応します。ただし、フックの利点を活用するために、既存のクラスベースのコンポーネントを徐々に移行することもできます。

幸いなことに、この課題には高次コンポーネント (HOC) という解決策があります。 HOC は、フックベースの機能を挿入する関数でクラス コンポーネントをラップする方法を提供します。

フックを使用した HOC の作成

React を統合する HOC を作成するには

1. クラス コンポーネントを引数として受け取る関数を定義します。
2. その関数内で、WrappedComponent という新しいコンポーネントを作成します。
3. WrappedComponent 内で、必要な React フックを使用して、必要な状態またはロジックを抽出して利用します。
4. フックの戻り値をプロパティとしてクラス コンポーネントに渡します。
5. HOC 関数から WrappedComponent を返します。

例:

MyDiv というクラス コンポーネントがあるとします。

class MyDiv extends React.component {
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return 
{this.state.sampleState}
   }
}

フックベースの状態を MyDiv に追加するには、MyHook(Component) { を使用して HOC:

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return ;
  }
}

HOC の統合

これで、MyDiv クラス コンポーネントを withMyHook HOC でラップできます:

class MyComponent extends React.Component {
  render(){
    const myHookValue = this.props.myHookValue;
    return 
{myHookValue}
;
  }
}

export default withMyHook(MyComponent);

この手法を使用すると、大幅なリファクタリングを行わずに、React フックを既存のクラスベースのコードベースに段階的に統合できます。