基本知識(shí)

React的組件有兩種屬性，state 和 props，state一般是在組件內(nèi)部使用，而props則代表父組件傳入的屬性。

useState對(duì)應(yīng)于state，是用來管理組件的內(nèi)部屬性的，用法如下：

const [count, setCount] = useState(initState)

• params: 參數(shù)initState
  • state 的初始值 - 它可以是任意類型，比如數(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)的能力。也就是說，在一個(gè)函數(shù)組件的多次渲染之間，這個(gè) state 是共享的。

useState 和Class組件中的 setState

• 類組件中的 state 只能有一個(gè)。所以我們一般都是把一個(gè)對(duì)象作為 一個(gè) state，然后再通過不同的屬性來表示不同的狀態(tài)。
• 函數(shù)組件中用 useState 則可以很容易地創(chuàng)建多個(gè) state，所以它更加語義化。

用useState更新對(duì)象類型的state

useState不會(huì)自動(dòng)合并需要更新的對(duì)象，所以如果在函數(shù)式組建種通過useState去管理一個(gè)對(duì)象類型的state時(shí)，在使用setXX的時(shí)候，需要用函數(shù)式更新方式，在函數(shù)中返回一個(gè)對(duì)象類型的數(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)建，就需要有恢復(fù)狀態(tài)的過程，這通常會(huì)讓組件變得更復(fù)雜。

比如一個(gè)組件想在服務(wù)器端請(qǐng)求獲取一個(gè)用戶列表并顯示，如果把讀取到的數(shù)據(jù)放到本地的 state 里，那么每個(gè)用到這個(gè)組件的地方，就都需要重新獲取一遍。

• 無狀態(tài)組件：如果用狀態(tài)管理框架（如Redux），去管理所有組件的 state 的話，那么組件本身就可以是無狀態(tài)的。