基本知识

React的组件有两种属性，state 和 props，state一般是在组件内部使用，而props则代表父组件传入的属性。

useState对应于state，是用来管理组件的内部属性的，用法如下：

const [count, setCount] = useState(initState)

params: 参数initState
- state 的初始值 - 它可以是任意类型，比如数字、对象、数组等等。
return: 返回值是一个数组，包含两个元素
- count: 该state的名字
- setCount：修改该state的方法
要创建多个 state，那么我们就需要多次调用 useState

当需要修改count的值的时候，只需调用setCount进行修改就行。
setCount用两种使用方法

值更新：setCount(1)，该方法会把count的值置为1
函数式更新：setCount((preCount) => preCount +1)，该方法把上一次count的值加1更新为新的count

useState 让函数组件具有维持状态的能力。也就是说，在一个函数组件的多次渲染之间，这个 state 是共享的。

useState 和Class组件中的 setState

类组件中的 state 只能有一个。所以我们一般都是把一个对象作为一个 state，然后再通过不同的属性来表示不同的状态。
函数组件中用 useState 则可以很容易地创建多个 state，所以它更加语义化。

用useState更新对象类型的state

useState不会自动合并需要更新的对象，所以如果在函数式组建种通过useState去管理一个对象类型的state时，在使用setXX的时候，需要用函数式更新方式，在函数中返回一个对象类型的数据，如：

import React, {userState} from "react";

const UserInfo = (saveUserInfo) => {
    const [userInfo, setUserInfo] = userState({name:'', age: 10});

    return (
    <>
        <div>name: {userInfo.name}</div>
        <div>age: {userInfo.age}</div>
        <input
            label="Name"
            type="text"
            value={userInfo.name}
            onChange={(event) =>
                setUserInfo((preUserInfo) => ({...preUserInfo, name: event.target.value}))
            }
        ></input>
        <input
            label="Age"
            type="number"
            value={userInfo.age}
            onChange={(event) =>
                setUserInfo((preUserInfo) => ({...preUserInfo, age: event.target.value}))
            }
        ></input>
        <button onClick={() => saveUserInfo(userInfo)}>Save</button>
    </>
    )
}

export default UserInfo;