React Hooks简介
React Hooks
就是用函数的形式代替原来的继承类的形式,并且使用预函数的形式管理state
,有Hooks
可以不再使用类的形式定义组件了
useState 的介绍
useState
是react
自带的一个hook
函数,它的作用是用来声明状态变量。// useState 接收的参数是状态的初始值 // 它返回一个数组:这个数组的第0位是当前的状态值,第1位是可以改变状态值的方法函数 const [ count , setCount ] = useState(0);
- 使用
State
的值:<p>You clicked {count} times</p>
- 更改
State
中的值<button onClick={()=>{setCount(count+1)}}>click me</button>
多状态声明的注意事项
- React是根据useState出现的顺序来确定多个useState找到对应的state
- 所以
useState
不能在if...else...
这样的条件语句中进行使用(例如下面这样就是错误的)import React, { useState } from 'react'; let showSex = true function Example2(){ const [ age , setAge ] = useState(18) if(showSex){ const [ sex , setSex ] = useState('男') showSex=false } const [ work , setWork ] = useState('前端程序员') return ( <div> <p>JSPang 今年:{age}岁</p> <p>性别:{sex}</p> <p>工作是:{work}</p> </div> ) } export default Example2;