More than 3 years have passed since last update.

React学習のアウトプット（２日目：ライフサイクルフック）

Posted at 2021-03-18

React学習2日目

今回もアウトプットしていきます。

今回の内容はuseEfectと呼ばれる、ライフサイクルについて書いていきます。

Vueで言うと、mounted、updated、destryedに当たるものです。

これら３つをまとめたものがuseEfectです。

百聞は一見に如かずということでとりあえず例を見ていきましょう。

レンダーごとに呼び出し#

まず、１つ目はレンダー毎に呼び出す方法です。

レンダー毎とは、mounted、updated、destoryedのライフサイクルフックです。

hook.jsx

useEffect(() => {
    console.log('render')

    return () => {
      console.log('destoryed')
    }
  })

このreturnで返しているところはクリーンアップ関数とも呼ばれています。

これで要素が破棄されたときに関数を呼び出すことができます。

Vueだとcreatedやmountedをわざわざ記述しなきゃいけないことをたった１つの関数でまとめて行えるとは非常に便利ですね。

次はマウントされたときだけ呼び出す方法です。

hook.jsx

useEffect(() => {
    console.log('mounted')
  }, [])

このようにuseEfectの第二引数に[]（空の配列）を渡すことによってマウント時のみ実行されます。

これは、useEfectが第二引数の値が同じの場合、useEfectが実行されないことを意味しています。

逆を言えば、第二引数の値が変わっていれば呼び出されます。

上記と同じように、マウント、アンマウント時のみ呼び出すことも可能です。

hook.jsx

useEffect(() => {
    console.log('mounted')
    return () => {
      console.log('destoryed')
    }
  }, [])

最後に特定のレンダー時に呼び出す方法です。

hook.jsx

useEffect(() => {
    console.log('認証されています！')
  }, [auth])

ひとつ前は第二引数に空の配列を渡していましたが、今回は```logged`を渡すことでloggedの値が変化したときに発動されます。

これも凄く便利ですね。

ユーザーがログインしているかしていないかでページの表示を変えることも可能です。

このようにしてライフサイクルをコントロールすることができます。

まだ、そこまでVueとの違いを実感できていないのでもっと学んでいこうかなと思います。

皆さんも頑張りましょう！

以上、「React学習のアウトプット（２日目：ライフサイクルフック）」でした！

Thank you for reading