jintz.qrunch.io読者になる1Reactカスタムフックの可能性を感じるReact投稿日:2019-06-12最終更新:2019-06-12筆者のブログで記事をみるReactカスタムフックの可能性を感じる趣味でReactの勉強を始めて早ひと月。何か面白い機能は無いかなーとReact公式を眺めていたら、面白そうなものが目に入りました。その名も「カスタムフック」。今まで気づかなかった。いうわけで、簡単に使い方をまとめてみます。本の情報を保持する配列があるとして。books;この配列から一つの要素を画面に表示するとします。表示する要素はボタンで簡単に切り替えられるようにしましょう。いうわけで、出来上がったコードがこちら。App;実際にはbuttonsとbook_infoは別コンポーネントに切り出してるかもしれませんね。個人的にはbookNum周りがイケてないと思います。カスタムフックを使った場合というわけで、本題のカスタムフックに入っていきましょう。カスタムフックはユーザーが自由に作成することができ、かつ内部でReactが提供しているフックを利用することができる構文です。カスタムフックを作ってみましょう。books;関係するロジックをuseCurrentBookの中に閉じ込めました。これで利用する側からはbookNumというイケてない変数を消し去ることができます。必要があればsetBookNum等の名前も変えていいでしょう。カスタムフックにはuseから始まる関数名にしなければならないという規則があります。最終的なコードはこちら。App;実行してみても、動作に影響がないことがわかります。このようにカスタムフックはフックを用いたロジックをモジュールとしてまとめることができます。カスタムフックは呼び出される個所ごとにstateを生成するため、状態を共有することはありません。同一のロジックを用いていて、かつ別個のstateを管理したい場合にとても役に立つでしょう。いう意味では今回の例は悪かったかもしれませんね。まとめというわけで、カスタムフックの紹介でした。モジュールの形式で切り出すのか、カスタムフックの形で切り出すのか、ロジックを整理してしっかり使い分けていきたいですね。Qrunch.netサーバー提供フィードバックを送信する。