React学習2日目
今回もアウトプットしていきます。
今回の内容はuseEfect
と呼ばれる、ライフサイクルについて書いていきます。
Vueで言うと、mounted
、updated
、destryed
に当たるものです。
これら3つをまとめたものがuseEfectです。
百聞は一見に如かずということでとりあえず例を見ていきましょう。
レンダーごとに呼び出し
まず、1つ目はレンダー毎に呼び出す方法です。
レンダー毎とは、mounted
、updated
、destoryed
のライフサイクルフックです。
useEffect(() => {
console.log('render')
return () => {
console.log('destoryed')
}
})
このreturn
で返しているところはクリーンアップ関数とも呼ばれています。
これで要素が破棄されたときに関数を呼び出すことができます。
Vueだとcreated
やmounted
をわざわざ記述しなきゃいけないことをたった1つの関数でまとめて行えるとは非常に便利ですね。
マウント時のみ
次はマウントされたときだけ呼び出す方法です。
useEffect(() => {
console.log('mounted')
}, [])
このようにuseEfect
の第二引数に[]
(空の配列)を渡すことによってマウント時のみ実行されます。
これは、useEfect
が第二引数の値が同じの場合、useEfect
が実行されないことを意味しています。
逆を言えば、第二引数の値が変わっていれば呼び出されます。
マウント、アンマウント時
上記と同じように、マウント、アンマウント時のみ呼び出すことも可能です。
useEffect(() => {
console.log('mounted')
return () => {
console.log('destoryed')
}
}, [])
特定のレンダー時
最後に特定のレンダー時に呼び出す方法です。
useEffect(() => {
console.log('認証されています!')
}, [auth])
ひとつ前は第二引数に空の配列を渡していましたが、今回は`logged`を渡すことで
logged``の値が変化したときに発動されます。
これも凄く便利ですね。
ユーザーがログインしているかしていないかでページの表示を変えることも可能です。
このようにしてライフサイクルをコントロールすることができます。
まだ、そこまでVueとの違いを実感できていないのでもっと学んでいこうかなと思います。
皆さんも頑張りましょう!
以上、「React学習のアウトプット(2日目:ライフサイクルフック)」でした!
Thank you for reading