React フックを既存のクラス コンポーネントに統合するにはどうすればよいですか?

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

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

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

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

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

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

例:

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

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

フックベースの状態を MyDiv に追加するには、次のようにします。 HOC を作成できます:

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return <Component {...props} myHookValue={myHookValue} />;
  }
}

HOC の統合

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

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

export default withMyHook(MyComponent);

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

以上がReact フックを既存のクラス コンポーネントに統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。