useState

構成部品ステータスの管理を許可する関数
ボタンを押したときの数字の立ち上がりと立ち下がりカウンタを実現してみましょう.

import React from "react";


function Counter() {
    const onIncrease = () =>{
        console.log('+1');
    }

    const onDecrease = () => {
        console.log('-1');
    }
    return (
        <>
            <h1>0</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </>
    );
}


export default Counter;

前回学んだように、jsxでjavascript値をレンダリングするには{}を使用する必要があります.上の文はまだカウンタを表していません.しかし、ボタンをクリックするだけでonIncreaseとonDecreaseを実行することができ、コンソールウィンドウに1と-1を表示することのみが実現される.
これで、useSateを使用してカウンタを完了する前に、useStateを簡単に理解できます.const [ a, b] = useState(c);aという状態を作成しますが、デフォルト値はcで、bを使用してaの値を変更します.

import React, {useState} from "react";


function Counter() {
    const [ number, setNumber] = useState(0);
    const onIncrease = () =>{
        setNumber(number + 1);
    }

    const onDecrease = () => {
        setNumber(number - 1 );
    }
    return (
        <>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </>
    );
}


export default Counter;

さあ.上記で学んだuseState()を復唱しながら考えます.const [ number, setNumber] = useState(0);「numberステータスを作成するには、初期値が0で、setNumberを使用してnumberの値を変更します.」onIncreaseおよびOndecreaseは、値をsetNumberに変更する関数となる.