・0 pv・2 min read
useState、useEffect
React全然わからん…ので基礎的なところを学習しました。
パッと確認出来るようにまとめます。
useState
以下の形で表現する。
const [状態を表す変数名, 左の変数を更新する関数] = useState(初期値)
例：
const [count, setCount] = useState(0)「count」の値を変更するときは「setCount」に更新したい値を渡す。
// 1ずつカウントアップ
const countUp = () => {
setCount(count + 1)
}
// カウントを0でリセット
const countReSet = () => {
setCount(0)
}useEffect
レンダリングされるたびに呼び出されるもの
引数で呼ぶタイミングを指定できる
// 初回レンダリング後のみ実行(第2引数に[]を指定)
useEffect(() => {
console.log("カウント初期値 ...", count)
}, [])
// 毎回レンダリング後に実行(第2引数を指定しない)
useEffect(() => {
console.log("現在のカウント ...", count)
})
// 特定の変数更新後のレンダリング後に実行(第2引数に[対象の変数名]を指定)
useEffect(() => {
console.log("現在のカウント ...", count)
}, [count])
// 複数の変数更新後のレンダリング後に実行(第2引数に[対象の変数名, 対象の変数名2]を指定)
useEffect(() => {
console.log("現在のカウント ...", count)
console.log("現在のカウント2 ...", count2)
}, [count, count2])難しいところは理解しきれていないので、整理してからそのうち投稿するかも・・・