React中函数式Hooks之useState的使用

useState

首先不同于class组件这个组件中没有this

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2021-11-11 11:12:01
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2021-11-26 11:17:06
 */

function Demo() {
   
    //useState中传入的参数是默认值
    // useState 返回的是一个数组 这个数组的第一项是当前的状态 第二项是个函数 用于更新第一项的状态
    // [状态，改变状态的函数]
    let [num, setNum] = React.useState(0)
    let [zjqName, setzjqName] = React.useState({
   name:'zjq'})
    const changeNum = () => {
   
        setNum(num + 1)
    }
    const changeName =()=>{
   
        setzjqName(zjqName=>{
   
            return {
   
                ...zjqName,
                name:"hahahah"
            }
        })
    }
    return (
        <div >
            我现在的num数值是 ： {
   num}
            <button onClick={
   changeNum}>点我num加1</button>
            我的名字是 ： {
   zjqName.name}
            <button onClick={
   changeName}>点我改变name</button>
        </div>
    )
}

export default Demo

React.useState(0)：
1.这个方法会返回一个数组，[状态，改变状态的函数]；
2.这个数组的第一项是当前的状态 第二项是个函数 用于更新第一项的状态；
3.useState传入的值就是num这个变量的初始值，也就是默认值。

点击按钮出发changeNum方法，在这个方法中调用setNum这个方法，并将最近的num值传入进入，即完成了num这个变量状态的更新。