React のフックはどのような問題を解決しますか?

解決された問題: 1. コンポーネントから状態ロジックを抽出し、コンポーネント間で状態ロジックを再利用することが難しいという問題を解決します。 2. コンポーネントの相互に関連する部分をより小さな関数に分割し、複雑なコンポーネントの問題を解決します。 3.クラスコンポーネントと関数コンポーネント間の違いの問題を解決するには、クラス以外の状況で React 機能をさらに使用します。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react のフックによって解決される問題

1. コンポーネント間で状態ロジックを再利用するのは困難です

React は、再利用可能な方法を提供していません。コンポーネントへの「アタッチ」動作 (コンポーネントをストアに接続するなど) は、レンダー プロップと高次コンポーネントを使用してこの問題を解決できます。しかし、そのようなソリューションではコンポーネント構造を再編成する必要があるため、煩雑になり、コードが理解しにくくなる可能性があります。プロバイダー、コンシューマー、上位コンポーネント、レンダー プロップ、その他の抽象化レイヤーで構成されるコンポーネントは、「ネストされた地獄」を作成する可能性があります。 DevTools でそれらをフィルタリングして除外することは可能ですが、これはより深い問題を示しています。React は、共有状態ロジックのためのより優れたネイティブな方法を提供する必要があります。

フックを使用してコンポーネントから状態ロジックを抽出すると、これらのロジックを個別にテストして再利用できます。フックを使用すると、コンポーネント構造を変更せずに状態ロジックを再利用できます。これにより、コンポーネント間またはコミュニティ内でフックを共有することが容易になります。

2. 複雑なコンポーネントの理解が困難になる

コンポーネントでは、各ライフサイクルに無関係なロジックが含まれることがよくあります。たとえば、コンポーネントは多くの場合、componentDidMount およびcomponentDidUpdate でデータを取得します。ただし、同じcomponentDidMountには、イベントリスナーの設定など、他の多くのロジックも含まれている場合があります。これらのロジックは、後でcomponentWillUnmountでクリアする必要があります。関連していて変更が必要なコードは分割され、まったく関係のないコードは同じメソッドに結合されます。これにより、バグや論理的矛盾が発生しやすくなります。

状態ロジックがあらゆる場所に存在するため、ほとんどの場合、コンポーネントをより小さな粒度に分割することはできません。これはテストに特定の課題ももたらします。同時に、これが、多くの人が React を状態管理ライブラリとともに使用する理由の 1 つです。ただし、これにより多くの抽象的な概念が導入されることが多く、異なるファイル間を行き来する必要があるため、再利用がより困難になります。

この問題を解決するために、Hook は、コンポーネントの相互に関連する部分を、ライフサイクルに従って強制的に分割するのではなく、より小さな機能 (サブスクリプションの設定やデータの要求など) に分割します。リデューサーを使用してコンポーネントの内部状態を管理し、予測しやすくすることもできます。

3. 理解できないクラス

コードの再利用とコード管理で遭遇する困難に加えて、クラスは React を学習する上での大きな障壁となっています。これが他の言語とは大きく異なる JavaScript でどのように機能するかを理解する必要があります。イベントハンドラーをバインドすることを忘れないでください。安定した構文の提案はなく、コードは非常に冗長です。誰もが props、state、およびトップダウンのデータ フローをよく理解できますが、クラスについては理解できません。経験豊富な React 開発者の間でも、関数コンポーネントとクラス コンポーネントの違い、さらには 2 つのコンポーネントの使用シナリオについてさえ意見の相違があります。

これらの問題を解決するために、Hook を使用すると、クラスなしでさらに多くの React 機能を使用できるようになります。概念的には、React コンポーネントは常に関数に似ています。フックは、React の精神的な原則を犠牲にすることなく機能を取り入れています。 Hook は、複雑な関数型プログラミングやリアクティブ プログラミングのテクニックを学ばなくても、問題の解決策を提供します。

推奨学習: "react ビデオ チュートリアル "

以上がReact のフックはどのような問題を解決しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。