目次
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. フックを呼び出すのはトップレベルのみ)
執筆中
独自(カスタム)フックの作成方法
これが出来たら、初学者から脱出出来ます。
執筆中