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就是一条一条往下执行,不能添加条件。