React のカスタム フックを正しく使用していますか?

カスタム フックは、アプリケーション内のさまざまなコンポーネント間で再利用および呼び出しできる機能をコンポーネントの外部で作成および維持するのに役立つメソッドです。
聞き覚えがあるでしょうか？はい、これらは基本的に utils.js に保存しておく傾向にある util 関数で、フックの嵐が起こる前、または React や Angular などのライブラリを使い始める前に作業していたときに使用されます。

また、これは S.O.L.I.D 原則における依存関係の反転の適切な例です。

ここでは、それらを js ファイル内の関数として保持するのではなく、コンポーネントの先頭で呼び出すことができるフックとして保持しています。

カスタムフックを使用する理由

アプリケーションのサイズが大きくなるにつれて、再利用できるコンポーネントの外側のロジックを抽象化することが重要です。これはコードのモジュール性を向上させるのに役立ちます。このようなロジックを外部に移動することで、多くのコンポーネントを単にプレゼンテーション用のコンポーネントとして保持できます。

独自のカスタム フックを作成すると、新しい機能を追加するために外部ライブラリを使用する必要がなくなり、スペースとメンテナンス コストが節約されます。

カスタム フックは、組み込みフックと同様にコンポーネントの上部で使用することを目的としているため、useState、useEffect、さらにはその内部でカスタム フックを使用することもできます。

フック作成時の注意点

• 「use」キーワードから始めます。
• SOLID 原則を念頭に置いてください。フックは 1 つのことだけを実行する必要があります。
• params の型を事前に定義します — typescript の場合 — 素晴らしいです。
• 消費しているコンポーネントの最上部でのみ使用してください
• 将来追加される可能性があると考えて、新しいパラメータやオプションを追加しないでください。スケーリングのための余地を確保してください。必要に応じて、フックの機能を拡張できます

記事全文については、medium ブログをご覧ください。

以上がReact のカスタム フックを正しく使用していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。