React useState Hook

react中的 useState hook使用方法

useState

useState概念解释: useState能够解决类组件 所有自定义变量只能存储在this.state 的问题

基础使用方法

useState(value)函数会返回一个数组，该数组包含2个元素：第1个元素为我们定义的变量，第2个元素为修改该变量对应的函数名称。

const [variable,setVariable] = useState(value);
setVariable(newValue);//修改variable的值
//使用示例
const [value,setValue] = useState(''); //字符串
const [number,setNumber] = useState(0); //数字
const [bool,setBool] = useState(false); //布尔值
const [arr,setArr] = useState([]); //数组
const [obj,setObj] = useState({})  //对象

拆解说明：

1. variable 为变量名，实际使用中可以修改成任意变量名，比如name、age、count等等；
2. setVariable 该名称采用 "set"+"变量名" 的驼峰命名形式，只是为了提高代码可读性。当然你也可以使用任意你喜欢的命名风格，但是不能以数字开头。
3. value 必填项，不可缺省，若缺省则实际运行时会提示变量名未定义；

高级使用方法

Objcet的修改方法

const [person, setPerson] = useState({name:'kino',age:18});

//利用es6解构赋值进行修改
setPerson({...person,{name:'鸽鸽'}})

//拷贝一份对象进行修改
let newPerson = {...person};
newPerson.name = '鸽鸽';
setPerson(newPerson)

Array的修改方法

const = [arr,setArr] = useState(['小明','小红'])

//新增
setArr(['小鱼',...arr])

//删除
let newArr = [...arr]
newArr.splice(0,1)
setArr(newArr)

//修改
let newArr = [...arr]
newArr[0] = '小蓝'
setArr(newArr)