基本知識
React的組件有兩種屬性，state 和 props蒜胖，state一般是在組件內(nèi)部使用消别，而props則代表父組件傳入的屬性。
useState對應于state台谢，是用來管理組件的內(nèi)部屬性的寻狂，用法如下：
const [count, setCount] = useState(initState)
- params: 參數(shù)
initState-
state的初始值 - 它可以是任意類型，比如數(shù)字朋沮、對象蛇券、數(shù)組等等。
-
- return: 返回值是一個數(shù)組，包含兩個元素
-
count: 該state的名字 -
setCount：修改該state的方法
-
- 要創(chuàng)建多個 state纠亚，那么我們就需要多次調(diào)用
useState
當需要修改count的值的時候塘慕，只需調(diào)用setCount進行修改就行。
setCount用兩種使用方法
-
值更新：
setCount(1)蒂胞，該方法會把count的值置為1 -
函數(shù)式更新：
setCount((preCount) => preCount +1)图呢，該方法把上一次count的值加1更新為新的count
useState讓函數(shù)組件具有維持狀態(tài)的能力。也就是說骗随，在一個函數(shù)組件的多次渲染之間蛤织，這個 state 是共享的。
useState 和Class組件中的 setState
- 類組件中的
state只能有一個鸿染。所以我們一般都是把一個對象作為 一個state指蚜，然后再通過不同的屬性來表示不同的狀態(tài)。 - 函數(shù)組件中用
useState則可以很容易地創(chuàng)建多個state涨椒，所以它更加語義化姚炕。
用useState更新對象類型的state
useState不會自動合并需要更新的對象，所以如果在函數(shù)式組建種通過useState去管理一個對象類型的state時丢烘，在使用setXX的時候柱宦，需要用函數(shù)式更新方式，在函數(shù)中返回一個對象類型的數(shù)據(jù)播瞳，如：
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;
有狀態(tài)組件與無狀態(tài)組件
- 有狀態(tài)組件：組件有自己的
state
一旦組件有自己狀態(tài)掸刊，意味著組件如果重新創(chuàng)建，就需要有恢復狀態(tài)的過程赢乓，這通常會讓組件變得更復雜忧侧。
比如一個組件想在服務器端請求獲取一個用戶列表并顯示，如果把讀取到的數(shù)據(jù)放到本地的 state 里牌芋，那么每個用到這個組件的地方蚓炬，就都需要重新獲取一遍。
- 無狀態(tài)組件：如果用狀態(tài)管理框架（如
Redux）躺屁，去管理所有組件的state的話肯夏，那么組件本身就可以是無狀態(tài)的。
