使用できる 5 つの React Hook ライブラリ

後輩のアドバイス —やってみてください🌻

私は10 か月近くReactと連絡を取り合っていますが、私の意見では、react フックはコードをよりきれいにし、コードの可読性を改善し、コードの量を減らします。難しくない。

フックをまだ使用したことがない場合は、フックをプロジェクトに追加してみてください。プログラミングを簡単で興味深いものにすることができるからです。

このブログでは、いくつかのプロジェクトで試した 5 つの React Hook ライブラリを共有したいと思います。リンゴ味わき

1. useMedia ✂️

たとえば、小さな画面ではドロップダウン リスト フィールドでのみ表示し、大きな画面では非表示にするハンバーガー アイコンがある場合があります。useMediaは、この問題を解決するための迅速なソリューションを提供します。

コード例:

2. React-hook-form 飴細工

https://react-hook-form.com/

React 開発者を含め、検証を伴う複雑なフォームを作成して再作成することを好む人はいません。

React-hook-formはフォームに関するフックです: 「使いやすい検証を備えた、パフォーマンスが高く、柔軟で拡張可能なフォーム」、よりシンプルな構文、速度、再レンダリングの削減、メンテナンス性の向上により、GitHub のトップに到達し始めました。 .

react-hook-form を使用するには、useFormフックを呼び出すだけです。これを行うと、registerプロパティを分解するオブジェクトを取得します。

Registerは関数であり、ユーザーが入力した入力値を受け入れて検証し、各値を関数に渡します。関数はフォームが送信されたときに呼び出されるため、各入力にrefとして接続する必要があります。.

レジスターが正しく機能するためには、各入力に適切な「名前」属性を提供する必要があります。たとえば、ユーザー名の入力の場合、その名前は「username」です。これは、フォームを送信すると、単一のオブジェクトですべての入力値を取得するためです。

コード例:

フォームの送信と入力データの受信を処理するために、フォーム要素にonSubmitを追加し、それを同じ名前のローカル関数に接続します。

よりuseForm、我々は名前の関数を取得しますhandleSubmitを、私たちは 周りにラップをonSubmitとして高階関数、handleSubmitの機能は、各入力に入力されたすべてのデータを収集するための責任を負うことになります、そして我々は、オブジェクトの名前付きデータを受信するのonSubmit。

コード例:

フォームを検証し、入力値ごとに制約を追加するには、レジスター関数に情報を渡すだけです。

最初の属性は必須です。デフォルトではfalseに設定されていますが、フォームに入力されていないときにフォームが送信されないようにするには、trueに設定できます。

この入力に数値を使用する場合(この入力が人の年齢に関するものであると想定)、minLengthおよびmaxLength の代わりに属性minおよびmaxを使用します。

3. React router

https://reactrouter.com/web/guides/quick-start

React ルーターは、最も人気のある React ライブラリの 1 つであり、アプリケーションの URL 履歴レコードのルーティングと取得に使用されます。

提供される最も目を引くフックは次のとおりです。

useHistory
useLocation
useParams
useRouteMatch

その名前はそれ自体を物語っています。

useHistoryはアプリケーション履歴データのメソッドを取得します。

useLocationは、現在の URL を表すオブジェクトを返します。

UseParamsは、現在のルートの URL パラメータのキーと値のペアのオブジェクトを返します。

useRouteMatchは、現在の URL を指定された URL と照合しようとします。指定された URL は、文字列またはさまざまなオプションを持つオブジェクトにすることができます。

4. Redux フック

https://react-redux.js.org/api/hooks

Redux は、アプリケーション全体でグローバル ステート マネージャーとして使用されます。フックが React コミュニティによってリリースされてから数か月後、Redux はフックのサポートを追加しました。このフックは、以前の高レベルのコンポーネント メソッドconnect()を置き換えるために使用できます。

提供される最も目を引くフックは次のとおりです。

useSelector
useDispatch
useStore

useSelector を使用すると、セレクター関数を使用して Redux ストア状態からデータを抽出でき、オブジェクトだけでなく、結果として任意の値を返すことができます。

useDispatchはdispatch、Redux ストアから関数への参照を返します。これを使用して、必要に応じてアクションをディスパッチできます。

useStoreは、<Provider>コンポーネントに渡されたのと同じ Redux ストアへの参照を返します。

個人的な意見ですが、ドキュメントは良いですが少し複雑です。使い始めるには、ドキュメントを読む必要があります。

5.usePortal 衣坊

https://github.com/alex-cory/react-useportal

usePortal を使用すると、ドロップダウン メニュー、モーダル ボックス、通知ポップアップ ウィンドウ、バブル プロンプト ボックスなどを簡単に作成できます。

アプリケーションのDOM階層の外部に要素を作成する方法を提供します。

コード例:

上記の例は私の個人的な提案に過ぎません。各フック タイトルの下にリンクを追加しました。元のサイトを直接参照できます。改善または修正できる点があれば、私に連絡してください。寒味覚まし

Web 開発への私のジュニア ロードに関する前回の記事に興味がある場合は、ここをクリックしてください: 🎈

https://xiaominzhu.medium.com/from-music-to-web-development-my-junior-path-7421e0ddd65

読んでくださってありがとうございます！