基本知识
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的话，那么组件本身就可以是无状态的。
