ReactのHooksを基礎から理解する（useState編）

useState

usestate によりページが動的にする

たとえば、クリック数カウント機能の実装は、通常の変数はできません。
つまり、通常の変数を変更しても、コンポーネントの再レンダリングの更新をトリガーすることはできません。

通常のJS変数は実現できない

import React from 'react'
function App() {
    let count = 0
    const add = () => {
        count++
    }
    return (
        <div>
            <button onClick={add}>add {count}</button>
        </div>
    )
}
export default App

useStateにて動的にページが更新できる

import React, { useState } from 'react'
function App() {
    const [count, setCount] = useState(0)
    const add = () => {
        setCount(count + 1)
    }
    return (
        <div>
            <button onClick={add}>add {count}</button>
        </div>
    )
}
export default App

useStateは何でしょうか

State, A component's memory

• props:親コンポーネントによって渡される情報
  • components/ProductCard.tsx

<ProductCard id={id} title={title} inStock={inStock}></ProductCard>

• state:コンポーネントの外部状態ではなく、内部状態です

stateの特徴

非同期更新

const add = () => {
    setCount(count + 1)
    console.log('cur count:', count) //非同期更新、最新のstateは取得できない　
}

統合される可能性があります

const add = () => {
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
}

関数で更新する際に統合されない

const add = () => {
    setCount(count => count + 1) // 関数を利用して、state更新は統合されない
    setCount(count => count + 1)
    setCount(count => count + 1)
    setCount(count => count + 1)
    setCount(count => count + 1)
}

不変データ（非常に重要！）

state には、値の型だけでなく、任意のJS型を指定できます
stateを直接変更することはできませんが、新しい値をsetStateにするセットする必要がある。

objectの書き方

const [userInfo, setUserInfo] = useState({name: 'mei', age: 20})
const changeAge = () => {
    // userInfo.age = 21 //間違っている！
    // stateは不変データであり、stateの値を直接修正ではなく、新しい値を渡す必要がある
    setUserInfo({
        name: 'mei'
        age: 21
    })
    //setUserInfo({
    //    ...userInfo, // 分解構文、ES6
    //    age: 21
    //})
}

arrayの書き方

const [list, setList] = useState(['x', 'y'])
const addItem = () => {
    setList(list.concat('z')
    // setList(list.push('z') // 間違っている
}