目次

React hooksとは

Reactの機能(状態管理、ライフサイクルメソッド)をクラス無しで使うための仕組み
React 16.8 で追加された新機能

何を言っているかよく分かりませんね。
現在は、おそらくですが、クラスでReactを実装することはあまり無く、関数コンポーネントで実装していくことが多いと思います。
ですので、あまり深く考えず、進んで、ちょっと慣れてきてから再度hooksとはを調べてみてもいいかと思います。

ライフサイクルメソッドについて、少し触れておきますと、
Mounting(マウント時)、Updating(更新時)、Unmounting(マウント解除時)のタイミングで処理するメソッドのことです。
そのライフサイクルメソッドがクラスを用いた実装ではなく、コンポーネントを用いた実装が行えるということですね。

React hookの種類(基本)

以下３つは基本なので、必ず(使い方を)覚えて下さい。使わないことはないです。

useState

ステートを管理するhook。
可変のデータ。
コンポーネント自体によって保持される

　つまり、普通にコンポーネントの変数みたいに思っていれば問題ないと思います。

　実装方法

const [count, setCount] = useState(0)
とか
const [name, setName] = useState('')

[]内の左の値は、値を取得するもの(変数)
[]内の右の値は、値を設定取得するもの
usestateの()括弧内は初期値

値は配列やオブジェクト型でも構いません。

useEffect

関数の実行タイミングをReactのレンダリング後まで遅らせるhook
画面が描写された後に実行される

実装方法(レンダリング毎に実行)

  useEffect(() => {
    処理
  })

実装方法(初回レンダリング時に実行)

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

実装方法(特定値の変化時に実行)

  useEffect(() => {
    処理
  }, [特定値])

useContext

　　React入r門 - Part4.2を参照してください。

React hookの種類(追加)

useCallback
useMemo

こちら二つは、パフォーマンスな観点から式、値をメモ化しておくというものです。

　★★★使用例、自Qiitaへのリンク、他サイトへのリンク、説明を載せる
　　執筆中

useLayoutEffect

　useEffectとほとんど使い方は同じです。処理されるタイミングが違うだけです。
　実際にuseEffectと明確に実装を使い分けた現場がありませんでした。

useRef
useReducer

　こちら二つは、現場でもチラホラと実装を見かけたが、私のスキルストックに無いので
　割愛します。
　学んだら追記します。

useImperativeHandle
useDebugValue

　すみません。名前すら知らない。ので、興味ある方は自分で調べて下さい。。。。

hookのルール

フックを呼び出すのはトップレベルのみ
React関数コンポーネント内から呼び出す
独自(カスタム)フック内から呼び出す

順番に解説していきます。

hookのルール(1. フックを呼び出すのはトップレベルのみ)

執筆中

独自(カスタム)フックの作成方法

これが出来たら、初学者から脱出出来ます。

執筆中