2、React Hook suseState方法使用

useState介绍
-useState是React自带的一个hook函数，它的作用是用来声明状态变量。

useState使用
1、直接引入该方法即可使用：

import React,{useState} from 'react'

2、使用useState声明变量：
下面使用了es6的数组解构赋值：

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

这里体现了useState的第一个作用就是声明变量

3、使用useState读取变量：

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

这里体现了useState的第二个作用就是读取变量
3、使用useState修改变量

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

这里体现了useState的第三个作用就是修改变量

使用多个useState的时候注意事项

我们不能主动去控制单个useState满足什么条件的时候执行，也就是说不能跟if…else…连用

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、错误用法：

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

效果预览：

错误信息：React Hook useState 是有条件调用的。必须以完全相同的顺序调用React Hooks组件渲染，useState就是一条一条往下执行，不能添加条件。