フレームワーク - インタビューの質問 7 - React のフックの長所と短所は何ですか

は非常に抽象的な概念reactでありhooks、初心者にとってはあまりフレンドリーではないことがよくありReactますhooks。

アドバンテージ

[1]. コードは非常に読みやすいです。使用する前に、パブリッシュ/サブスクライブカスタムイベントをライフサイクルhooksにマウントし、ライフサイクルでクリアする必要があります。使用後、 pass 、ライフサイクルを置くことができます。ライフサイクル。コードのメンテナンスを容易にする集中化されたライフサイクルもあります。componentDidMountcomponentWillUnmounthooksuseEffectcomponentDidMountcomponentDidUpdatecomponentWillUnmount

[2]. コンポーネントのレベルは浅くなり、それを使用する前に、通常、複数のコンポーネントの共通の状態を実現し、コンポーネントの機能を強化するためにhooks高次コンポーネントの方法が使用されます。これにより、コンポーネントのレンダリングとコストが増加します。Hocただし、カスタムコンポーネントメソッドHooksを使用すると、複数のコンポーネント間の共有状態をカスタムに置くことができ、簡単に状態を共有できます。hooksuseXXx()hooks

class[3].クラスコンポーネントthisのポインティング問題について考える必要がなく、hooksコンポーネント内のthis.stateデータやメソッドを取得するためにそれを使用する必要もありません。

[4]. 状態ロジックをコンポーネントから抽出できるため、これらのロジックを個別にテストして再利用できるため、Hookコンポーネントの構造を変更せずに状態ロジックを再利用できるため、コンポーネント間の共有がHookより便利になります。つまり、冗長なコードを大幅に削減できます。特にロジックを再利用する必要があるシナリオの場合

[5]. 破壊的な変更はなく、概念の理解にHook影響を与えず、既知の概念に対してより直接的な、、、、、ライフサイクルを提供し、それらを組み合わせる強力な方法を提供します。ReactHookReactAPIpropsstatecontextrefsHook

[6]. テストが簡単:hooks純粋なJavaScript関数であるため、単体テストを作成してシミュレーションするのが簡単です。

欠点がある

[1]. useEffect1 つにあまり多くのことを書き込むことはできません. 異なる機能ごとに複数のモジュールに分割して使用し、各機能ブロックを複数のモジュールに分割します.ソフトウェア設計における単一責任モデルuseEffectに従いhooksます.と、この 3 つを含みますライフサイクル、他のクラスコンポーネントのライフサイクルはサポートされていませんuseEffectconponentDidMountcomponentDidUpdatecomponentWillUnmountclass

class[2].コンポーネント内で呼び出さないでくださいhook。これは無効です。クラスコンポーネントのライフサイクルを完全にはシミュレートできません。useEffect hookシミュレートには使用できますが、使用するにはさらに考えて計画する必要があります。

[3].Hooksこれは新しい機能であり、互換性の問題がいくつかあり、クラスコンポーネント方式に比べて学習曲線が比較的急で、このプログラミングモードに適応するのに時間がかかります。

React主なhooks利点は、コードの可読性とパフォーマンスが向上し、コードのメンテナンスと反復が容易になり、同時に状態共有がより適切に達成されることですが、特定のシナリオと組み合わせて最適な方法を選択することも必要です。使用中の要件、それ以上のものはありませんhook。技術的な解決策のオプションがもう 1 つあります。

JS インタビューの質問 18 - Web ページのパフォーマンス最適化のパフォーマンス指標とそれを定量化する方法について話します

2023-03-14