破壊[react]usState

React Hooksが提供するusState
USStateとは?
useStateは最も基本的なHookであり,関数素子を可変状態に保つことができる.可変状態の特徴があるため、状態を管理する必要がある作業によく用いられる.
useStateのデフォルト構文

import React, { useState } from 'react';

function Exampe(){
	const [state, setState] = usetState(initinalState);
}

上のJavaScript構文は「分解配列構造」と呼ばれ、stateとsetStateは2つの値を作成します.すなわち、useStateを使用して、stateという最初の値とsetStateという2番目の値を返します.
上記のコードを使用してアレイ構造を分解しない場合、コードは以下のようになります.

var exampleStateVariable = useState('');
var state = exampleStateVariable[0];
var setState = exampleStateVariable[1];

2.usStateの構造
useStateを使用して変数を宣言すると、2対のアイテムを含む配列が作成されます.

const [state, setState] = useState(initialState);

2つのアイテムの最初のアイテムの状態は、現在の変数を表します.
2番目のアイテムは、変数の1番目のアイテムを更新する関数です.
2番目の項目は1番目の項目を変更、更新する関数なので、usStateの変数を変更する場合は、1番目の項目の現在の変数値に直接アクセスするのではなく、2番目のパラメータの関数で変数を変更します.

const [state, setState] = useState(initialState);

括弧にはinitialStateが含まれています.これは、最初のレンダリング時に返されるステータス値です.
ユーザステータス()カッコには、文字列、配列、booleanなどのさまざまな値が含まれます.

const [example1, setExample1] = useState();
const [example2, setExample2] = useState('');
const [example3, setExample3] = useState(true);
const [example4, setExample4] = useState([]);

3.例

import React, { useState } from 'react';

function Example(){
	const [count, setCount] = useState(0);
    
    return(
    	<div>
            <p>{count} times Clicked!</p>
            <button onClick = {() => setCount(count+1)}> 
        </div>
    )
}

上のCounterコードを見て、位置決めを完了しましょう:)

useStateをインポートし、配列構造を分解してuseState Hookを作成します.

最初のアイテムcountは現在の値を格納する変数ですよね?countの最初のレンダリング値は0、初期状態は0で、画面には0が表示されます.

上でstateを変更するには、2番目の項目setState関数を使用しなければならないと言っていましたよね?例では、ボタンのonClickにsetCount関数が使用されています.このボタンをクリックするたびにsetCount関数で値が(count+1)に更新されます.

更新されたcount値が再び画面に出力されると、成功します.