web-dev-qa-db-ja.com

Reactフック付き機能コンポーネントとクラスコンポーネント

Reactの hooks の導入により、フックとクラスコンポーネントで機能コンポーネントを使用するタイミングが主な混乱になりました。これは、フックを使用すると、機能コンポーネントでもstateおよび部分lifecycle hooksを取得できるためです。だから、私は次の質問があります

  • フックの本当の利点は何ですか？
  • フックとクラスコンポーネントで機能コンポーネントを使用する場合

たとえば、フックを備えた機能コンポーネントは、クラスコンポーネントのようにperfで役立ちません。 shouldComponentUpdateが実装されていないため、再レンダリングをスキップできません。もう理由はありますか？

前もって感謝します。

javascriptreactjsreact-hooks
23
Pranesh Ravi

HooksおよびReact.memoやReact.lazyなどの他の機能を導入する背後にある考え方は、記述する必要のあるコードを削減し、同様のアクションを一緒に集約することです。

ドキュメントでは、クラスの代わりにフックを使用する理由はほとんどありません

コンポーネント間でステートフルロジックを再利用するのは難しい通常、HOCまたはrenderPropsを使用する場合、DevToolsで表示しようとすると、複数の階層でアプリを再構築する必要があります。

複雑なコンポーネントは理解しにくくなります多くの場合クラスで相互に無関係なコードはしばしば一緒になってしまうか、関連するコードがばらばらになりがちで、メンテナンスがますます難しくなります。そのような場合の例は、componentDidMountでリスナーを追加し、componentWillUnmountでそれらを削除するイベントリスナーです。フックを使用すると、これら2つを組み合わせることができます

クラスは人とマシンの両方を混乱させますクラスでは、バインディングと、関数が呼び出されるコンテキストを理解する必要があり、これはしばしば混乱を招きます。

フックを備えた機能コンポーネントは、クラスコンポーネントのようにperfで役立ちません。 shouldComponentUpdateが実装されていないため、再レンダリングをスキップできません。

機能コンポーネントは、React.PureComponentを使用することで、クラスでReact.memoと同様の方法でメモでき、カスタム関数を実装できるReact.memoの2番目の引数としてコンパレータ関数を渡すことができます。コンパレータ

アイデアは、Reactクラスコンポーネントを使用して、Hooksおよびその他のユーティリティを使用して機能コンポーネントを使用して記述できるコードを記述できるようにすることです。フックは、コードの抽出、テスト、および再利用の柔軟性を高めながら、クラスのすべてのユースケースをカバーできます。

フックはまだ完全に出荷されていないため、重要なコンポーネントにはフックを使用せず、比較的小さなコンポーネントから始めることをお勧めします。はい、クラスを機能コンポーネントに完全に置き換えることができます

ただし、データフェッチのためにSuspenseが出るまで、フックを使用して機能コンポーネントよりもクラスコンポーネントを選択する必要がある理由の1つです。 useEffectフックを使用したデータフェッチは、ライフサイクルメソッドほど直感的ではありません。

また、@ DanAbramovのツイートの1つでは、フックはSuspenseで動作するように設計されており、Suspenseが使用されるまでClassを使用する方が良いと述べています

22
Shubham Khatri