基本知識(shí)
React的組件有兩種屬性，state 和 props，state一般是在組件內(nèi)部使用，而props則代表父組件傳入的屬性。
useState對(duì)應(yīng)于state，是用來(lái)管理組件的內(nèi)部屬性的，用法如下：
const [count, setCount] = useState(initState)
- params: 參數(shù)
initState-
state的初始值 - 它可以是任意類(lèi)型，比如數(shù)字、對(duì)象、數(shù)組等等。
-
- return: 返回值是一個(gè)數(shù)組，包含兩個(gè)元素
-
count: 該state的名字 -
setCount：修改該state的方法
-
- 要?jiǎng)?chuàng)建多個(gè) state，那么我們就需要多次調(diào)用
useState
當(dāng)需要修改count的值的時(shí)候，只需調(diào)用setCount進(jìn)行修改就行。
setCount用兩種使用方法
-
值更新：
setCount(1)，該方法會(huì)把count的值置為1 -
函數(shù)式更新：
setCount((preCount) => preCount +1)，該方法把上一次count的值加1更新為新的count
useState讓函數(shù)組件具有維持狀態(tài)的能力。也就是說(shuō)，在一個(gè)函數(shù)組件的多次渲染之間，這個(gè) state 是共享的。
useState 和Class組件中的 setState
- 類(lèi)組件中的
state只能有一個(gè)。所以我們一般都是把一個(gè)對(duì)象作為 一個(gè)state，然后再通過(guò)不同的屬性來(lái)表示不同的狀態(tài)。 - 函數(shù)組件中用
useState則可以很容易地創(chuàng)建多個(gè)state，所以它更加語(yǔ)義化。
用useState更新對(duì)象類(lèi)型的state
useState不會(huì)自動(dòng)合并需要更新的對(duì)象，所以如果在函數(shù)式組建種通過(guò)useState去管理一個(gè)對(duì)象類(lèi)型的state時(shí)，在使用setXX的時(shí)候，需要用函數(shù)式更新方式，在函數(shù)中返回一個(gè)對(duì)象類(lèi)型的數(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)組件與無(wú)狀態(tài)組件
- 有狀態(tài)組件：組件有自己的
state
一旦組件有自己狀態(tài)，意味著組件如果重新創(chuàng)建，就需要有恢復(fù)狀態(tài)的過(guò)程，這通常會(huì)讓組件變得更復(fù)雜。
比如一個(gè)組件想在服務(wù)器端請(qǐng)求獲取一個(gè)用戶(hù)列表并顯示，如果把讀取到的數(shù)據(jù)放到本地的 state 里，那么每個(gè)用到這個(gè)組件的地方，就都需要重新獲取一遍。
- 無(wú)狀態(tài)組件：如果用狀態(tài)管理框架（如
Redux），去管理所有組件的state的話(huà)，那么組件本身就可以是無(wú)狀態(tài)的。
