react 勉強メモ 3日目

フック(hooks)

クラスの機能をFunctional Compomnent でも使える

class component よりもシンプルでわかりやすく書ける上に後方互換なので既存のコードに影響を与えない

クラスコンポーネントのデメリット

- thisがわかりにくい

- stateロジックが複雑

- 副作用のある処理が複数ライフサイクルメソッドに分かれてしまう

useState関数

this.stateとthis.setState() を代替する

const [state変数名, state変更関数名] = useState(state初期値);

てな感じで書ける

useEffect関数

hooksでライフサイクルメソッドを代替できる

Functional Component でライフサイクルを使える

レンダーごとに useEffect() ないの処理が走る

componentDidMOunt(), ComponentDidUpdate(), ComponentWillUnmount() を代替できるよ

レンダー毎に実行

useEffect(() => {
  console.log('Render')
  return () => {
    console.log('Unmounting')
  }
})

 マウント時のみ実行

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

マウントアンマウント時のみ実行

useEffect(() => {
  console.log('Render')
  return () => {
    console.log('Unmounting')
  }
}, [])

特定のレンダー時（この場合limitの値が変わった時に実行されるよ）

const [limit, release] = useState(true);
useEffect(() => {
  console.log('Render')
}, [limit])