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)

__EOF__

本文作者：不在沉默着爆发，就在沉默中消亡
本文链接：https://www.cnblogs.com/Hekiss/p/16305551.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！