React Hooks学習メモ

React Hooks

関数コンポーネントでもstateを扱う

Hookとは

• クラスの機能(stateやライフサイクル)をFunctional Componentでも使える機能
• React 16.8から導入された(2020/2に正式リリース)
• 100%後方互換
  →古い書き方をしているコンポーネントなどに影響を及ぼさない
  →小さく導入できる

なぜHookを使うのか

シンプルさを保つため

• Class Componentは複雑になりやすい
  • thisという悪魔
  • stateを扱うロジックが複雑
  • 複数のライフサイクルメソッドに副作用のある処理がまたがる

useState()を使う

• ステートフックと呼ばれる
• クラスコンポーネントでいうthis.stateとthis.setState()の代替
• 複数のstateを扱うときはstate毎に宣言する

1.useState関数をインポート

import React, {useState} from 'react';

2.宣言する

const [isPublished, togglePublished] = useState(false);

3.JSX内で使う

<input /略/ onClick={() => togglePublished(!isPublished)} />

Functional Componentでもライフサイクルを扱う

useEffect()を利用する

useEffect()のメリット

• ライフサイクルメソッドを代替できる
• Functional Componentでライフサイクルを扱える
• コードをまとめることができる
  • 🙆‍♀️ 機能ベース（何をやっているのか）
  • 🙅‍♀️ 時の流れベース（ライフサイクルのメソッド毎）

useEffect()の仕組み

• レンダー毎にuseEffect()内の処理が走る
• 代替できるメソッド
  • componentDidMount()
  • componentDidUpdate()
  • componentWillUnmount()

useEffect()の使用

パターン① レンダー毎

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

• 基本形
• useEffect()内にCallback関数を書く
• Callbackはレンダー毎に呼ばれる
• returnするCallback関数はアンマウント時に呼ばれる。（クリーンアップ関数）

パターン② マウント時のみ実行

useEffect(() => {
  console.log('Render!');
}, [])

• 第二引数の配列内の値を前回レンダーと今回レンダーで比較
  • 変更があればCallback関数を実行
• 第二引数に空の配列を渡すと最初の１回（マウント時）のみ実行される

パターン③ マウント&アンマウント時に実行

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

• ①と②の複合形
• 通常のCallbackはマウント時のみ
  • 配列が空の場合はUpdating期間は処理が実行されない
• アンマウント時はretrun内のクリーンアップ関数が実行される

パターン④ 特定のレンダー時に実行

const [limit, release] = useState(true);

useEffect(() => {
  console.log('Render!');
}, [limit])

• マウント時に実行される
• limitの値が変わった時に実行される