react hooksについてまとめよう

そもそもreact hooksとは

hookはreact16.8で追加された心機能であり、以前までクラスを用いて表現する必要があったstate等のreactの機能をクラスを書かずに使えるようにしたもので以下のようなものがあります。

• useState
• useEffect
• useContext
• useReducer
• useCallback

1つずつ確認していきます。

useState

• その名の通り、stateを管理します。

コード例

export const TestUseState = () => {
// 関数名はset[変数名(語頭大文字)], useState()の引数で初期値指定
    const [count, setCount] = useState(0)
    return (
        <p>{count}</p>
        <button onClick={() => setCount(count+1)}>+1</button>
    );
}

useEffect

• 関数実行タイミングをレンダリング後まで遅らせることができる
• 第二引数に変数の配列を指定でき、それらが書き変わるタイミングで関数を実行できる
• 第二引数に空の配列を渡せば、初回レンダリング時のみ呼び出されるようにできる

最後の一個が一番重要な気がする

コード例

useEffect(() => {
  /* 第1引数には実行させたい副作用関数を記述*/
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存データを記述

useContext

• グローバル変数とみなす変数を設定できる
• いわゆるバケツリレーの解決に使われる

useReducer

• 大体useState
• 複数stateとactionを使うことによってより複雑な変更をstateに加えられる

useCallback

• 処理が重い関数などを入れ、再レンダリングごとに呼び出されるのを防ぐことができる
• 第二引数の依存配列の要素が変更されたときに呼び出される
• React.memoと組み合わせてレンダリングの負荷をさらに減らす

まとめ

以上ですが、後半三つについては今後詳しく調べたいと思います