React勉強　２回目　ReactHooksの種類

概要

今回はReactの大きな壁(個人の意見)のHooksについて学んだので、そのメモとして書いていきます。まだまだReactは初心者なので温かい目で見ていただけると幸いです

Hooksとは

これは調べたらたくさん出てくると思うのですが、要するに

いろいろな便利機能を簡単に使えますよ～

っていうものだと思っています。いろいろ種類があるのですが、よく使いそうなのが

• useState
• useEffect
• useRef
• useContext

この４つな気がします。今回はまとめとしてこの４つについて簡単に説明していこうと思います

useState

公式リファレンスを見てみると何やら難しそうな単語がたくさんあって、難しそうですが、要するに現在の状態とそれを更新する関数がセットになったやつという解釈をしています。
更新する関数によって状態が更新されたとき画面が再レンダリングされるためいちいち再レンダリングの処理を書いたりしなくていいのがGood!
書き方の例は

const [state, setState] = useState();

この場合stateに現在の状態が格納されsetStateを用いて更新することで再レンダリングされます。

useEffect

これは指定した状態が更新された際に呼ばれるものという認識です。この状態の指定の仕方は

useEffect(() => {
  //処理
},[state]);

この上のプログラムのstateの位置に指定したい状態を格納します。もしそれを指定せず、空にしているとはじめに1回だけその処理が実行されます。

useRef

これは値を読み取ることができるフックという認識でOKだと思います。テキストボックスに入力された文字列を取得したりすることによく使います。

テキストボックスの文字列を取得する際のプログラムの例 :

//refを定義
const ref = useRef()

//文字列を取得する関数
const handleSubmit = () => {
  console.log(ref.current.value);
}

//テキストボックスを描画
function App(){
  <form onSubmit={handleSubmit}>
    <input type="text" ref={ref} />
  </form>
}

useContext

これは複数のコンポーネントに送りたい情報があるときに、コンポーネント間のバケツリレーをせずに直接それぞれのコンポーネントに送れるフックという認識です。ちょっとサンプルコードをかくとすごく長くなりそうなので今回は省略させていただきます。一応送る側のコンポーネントでcreateContext()関数で情報をつくって受け取る方でuseContext()を使って情報を受け取ります。

補足

これらのフックを使うときには

import React, { フック名 } from 'react'

でインポートにてくださいね。じゃないとエラーが出てしまします

まとめ

ReactHooksは便利な機能をシンプルに扱うことのできるとてもありがたいもの！

ここまで読んでくださりありがとうございます。もし間違いなどあれば連絡くださるとありがたいです。