🐣
Reactをはじめてみた ２日目。
誰にも参考にならないかもしれない。
2日目 >>３時間ぐらいの学習時間
今日の学習資料
【React Hooks入門】完全初心者OK！8種類のHooksを学んでReactの理解を深めよう
慣れるまでは、動画中心が良い気がするので今日も動画を視聴
Hook（フック）React 16.8 で追加された機能を学ぶ
useState
変数の値を監視する
- 保存した値を含む状態変数( )。index
- 状態変数を更新し、React をトリガーしてコンポーネントを再度レンダリングできる状態設定関数( )。
import { useState } from 'react';
// index:状態, setIndex:セッター関数
const [index, setIndex] = useState(0);
// index 加算
const handleClick = () => {
setIndex(index + 1);
};
// ボタンクリックでhandleClickを実行
<button onClick={handleClick}>加算</button>
// ボタンクリックで、indexの値が更新され再レンダリングが行われる
useEffect
発火時期を決める、変数に変更があった場合とか
公式だと「コンポーネントを外部システムと同期できるようにする React Hook 」だそうだ。
外部システムとの接続によく使われるらしい。
useEffect(setup, dependencies)
| name | 備考 |
|---|---|
| setup | エフェクトのロジックを含む関数 |
| dependencies | コード内で参照されるすべてのリアクティブ値のリスト。リアクティブ値には、props、state、およびコンポーネント本体内で直接宣言されたすべての変数と関数が含まれます |
useContext
全般で使うconst 入れとく的なもの、ログイン情報とかに使える？
下の層のコンポーネントとデータの共有ができる。
props で渡すと煩雑になりがちだがこれを使うと楽に渡せる。
記述で迷った…同じように書いてもエラー出る…
結局 render の前にexport してあげて、かつ参照する側では
import { XXXX } from ',./main'; として動いた…うーん
useRef
要素への参照を行います。
useRefは、レンダリングに必要のない値を参照できる React Hook
const ref = useRef(initialValue)
使い道
- ref を使用して値を参照する
- ref を使用した DOM の操作 ＜＜ これ結構使いそう
- ref コンテンツの再作成を回避する
useReduser
カートの数量とかで使えそうなやつ
useMemo
重い処理を指定して隔離、それ以外をメモリで動かす。
useMemoは、再レンダリング間の計算結果をキャッシュできる React フック。
const cachedValue = useMemo(calculateValue, dependencies)
| name | 備考 |
|---|---|
| calculateValue | キャッシュする値を計算する関数 |
| dependencies | コード内で参照されるすべてのリアクティブ値のリスト。 |
useCallBack
指定変数の変動を検知してコールバックを実行
useCallbackは、再レンダリングの間に関数定義をキャッシュできるようにする React フック。
const cachedFn = useCallback(fn, dependencies)
使い道
- コンポーネントの再レンダリングをスキップする
- メモ化されたコールバックから状態を更新する
- エフェクトが頻繁に発動しないようにする
- カスタムフックの最適化
customHook
何度も書くものとかに使える？
今日わかった感じになったこと
- 何も対策しないと値１つの更新ごとに全体更新される
- useContextは使う用途しっかり考えるほうがいいかも
- useEffectは今後だいぶお世話になりそうなので後でしっかり学習する
気づき
- 一年前の動画と同じことやっているのにエラー出た、なにか使用が変わったのかな…。
Discussion