react hook -- useState

基本知识

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;

有状态组件与无状态组件

• 有状态组件：组件有自己的state
  一旦组件有自己状态，意味着组件如果重新创建，就需要有恢复状态的过程，这通常会让组件变得更复杂。

比如一个组件想在服务器端请求获取一个用户列表并显示，如果把读取到的数据放到本地的 state 里，那么每个用到这个组件的地方，就都需要重新获取一遍。

• 无状态组件：如果用状态管理框架（如Redux），去管理所有组件的 state 的话，那么组件本身就可以是无状态的。