一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
第一个hook ：useState
声明方法：
import {useState} from 'react' //引入hook
//声明方法
const [ userinfo , setUserinfo ] = useState({
name:'myname',
age:'22'
})
//用class的方法来创建state的方法
this.state = {
userinfo:{
name:'myname',
age:'22'
}
}
创建一个叫做userinfo 的state 的变量，和一个叫做setUserinfo 的方法，用来更新userinfo 的值。
- [x,y,z] = arr 这种形式是es6 的数组解构
//原本想要从数组中获取元素
var arr = ['id','name','age',...]
var a = arr[0] // 'id'
var b = arr[1] // 'name'
...
//数组解构的方法
let [a,b,...] = ['id','name','age',...]
console.log(a) // 'id'
console.log(b) // 'name'
...
其实就是把 “ = ” 号 右边的值赋值给 “ = ”号左边的变量，按照 数组的下标位置来一一对应。
- 如果要数组中某个值，但是只想要其中一个，可以把前面的位置空出来
[ , ,c] = ['id','name','age',...]
console.log(c) //'age'
- 也可以在左边对右边进行赋值
[a,b,c,d='height'] = ['id','name','age']
console.log(d) //'height'
因为useState 方法 返回一个数组，第一个为state，第二个为一个方法用来改变第一个state，所以可以用这种方式来直接声明
使用方法
可以直接使用 state
<div> 我叫：{userinfo.name}，年龄：{userinfo.age} </div>
//class的方式使用state
<div> 我叫：{this.state.userinfo.name}，年龄：{this.state.userinfo.age} </div>
假如要更新state
//使用定义的方法直接更新
setUserinfo({height:'188'})
//注意更新state是覆盖原有的state而不是追加
//可以使用对象结构的方法来追加
setUserinfo({...userinfo,height:'188'})
//class的方式更新state
const {userinfo} = this.state
this.setState({
userinfo:{
...userinfo,
height:'188'
},
})
useState 初始值可以是对象，数组，布尔值，子串，也可以什么都不传，直接用 useState()
我们可以在一个文件中创建多个useState
const [aa,steAa] = useState('a')
const [bb,steBb] = useState(['a','b'])
const [cc,steAa] = useState(true)
需要注意的是，声明useState必须在 React 函数的最顶层，不能再循环中，或者条件判断中声明。因为Reatc是靠 Hook的调用顺序来工作的。
useState 是最常用也是最简单的一个Hook
