図2は、フックsuseState方法を反応させます

はじめにuseState
-useStateは、フック関数を運んで反応して、その役割は、状態変数を宣言するために使用されます。

使用useState
1は、直接プロセスに導入し使用することができます。

import React,{useState} from 'react'

2、useState DECLARE変数：
以下は、アレイES6の解体割り当てを使用します。

  const [count,setCount] = useState(0);

ここでuseState最初の役割を宣言する変数にされて反映

3、変数のuseState読み取りを使用しました：

<p>点击了{count}次</p>

ここに具現useState第二の機能は、可変読み取ることで
修飾変数useStateを使用して、3

<button onClick={()=>{setCount(count+1)}}>点我</button>

ここでuseState第三の役割は、変数を変更することです反映

複数useStateノートを使用している場合

私たちは、もし...他と組み合わせて使用​​することができない単一の実行を、満たすuseStateどのような条件制御するためのイニシアチブを取ることができません...

1、通常の使用：

import React,{useState} from 'react'
const showAge = true;
function UseState() {
    const [count,setCount] = useState(0);
    const [age,setAge] = useState(0);
    const [sex,setSex] = useState('男');

    return(
        <>
            <p>我的次数为：{count}次</p>
            <p>我的年龄为：{age}岁</p>
            <p>我的性别为：{sex}</p>
        </>
    )
}

export default UseState

エフェクトプレビュー：

2、WRONG：

import React,{useState} from 'react'
const showAge = true;
function UseState() {
    const [count,setCount] = useState(0);

    if(showAge){
        const [age,setAge] = useState(0);
        showAge = false
    }
    const [sex,setSex] = useState('男');

    return(
        <>
            <p>我的次数为：{count}次</p>
            <p>我的年龄为：{age}岁</p>
            <p>我的性别为：{sex}</p>
        </>
    )
}

export default UseState

エフェクトプレビュー：

エラーメッセージ：フックuseStateは条件付きコールで反応します。まったく同じ順序で呼び出されなければならないuseStateが1つのダウンずつ実行され、フックコンポーネントのレンダリングを反応して、あなたは条件を追加することはできません。