useState 小結(jié)

useState是React Hooks中的一個(gè)核心函數(shù)，它允許在函數(shù)組件中添加狀態(tài)。useState接受一個(gè)參數(shù)，這個(gè)參數(shù)是狀態(tài)的初始值。調(diào)用useState會(huì)返回一個(gè)數(shù)組，這個(gè)數(shù)組包含兩個(gè)元素：

1. 當(dāng)前狀態(tài)的值：這是通過useState定義的狀態(tài)的當(dāng)前值，可以在組件內(nèi)部被讀取和顯示。
2. 更新狀態(tài)的函數(shù)：這是一個(gè)允許你更新狀態(tài)的函數(shù)。當(dāng)你調(diào)用這個(gè)函數(shù)并傳入新的狀態(tài)時(shí)，React會(huì)重新渲染組件，以反映狀態(tài)的變化。

useEffect 小結(jié)

useEffect是另一個(gè)重要的React Hook，用于在函數(shù)組件中執(zhí)行副作用操作（如數(shù)據(jù)獲取、訂閱或手動(dòng)更改React組件中的DOM）。useEffect可以模擬類組件中的幾種生命周期*，具體取決于其第二個(gè)參數(shù)（依賴項(xiàng)數(shù)組）的內(nèi)容。

• 模擬componentDidMount：當(dāng)useEffect的第二個(gè)參數(shù)為空數(shù)組[]時(shí)，該回調(diào)函數(shù)僅在組件掛載后執(zhí)行一次，這類似于類組件中的componentDidMount生命周期*。

• 模擬componentDidUpdate：如果useEffect的第二個(gè)參數(shù)包含了一個(gè)或多個(gè)值，那么當(dāng)這些值中的任何一個(gè)發(fā)生變化時(shí)，回調(diào)函數(shù)就會(huì)執(zhí)行。這可以用來(lái)在特定狀態(tài)或?qū)傩愿潞髨?zhí)行操作，類似于類組件中的componentDidUpdate。

• 模擬componentWillUnmount：如果useEffect的回調(diào)函數(shù)返回了一個(gè)函數(shù)，那么這個(gè)返回的函數(shù)會(huì)在組件卸載前執(zhí)行，類似于類組件中的componentWillUnmount。這通常用于執(zhí)行清理操作，如取消訂閱、移除事件*等。

函數(shù)式組件的渲染

函數(shù)式組件通過直接返回*X或組件樹來(lái)模擬render*。與類組件不同，函數(shù)式組件沒有顯式的render*；相反，組件的返回值直接對(duì)應(yīng)于渲染結(jié)果。

模擬shouldComponentUpdate

在函數(shù)式組件中，沒有直接對(duì)應(yīng)shouldComponentUpdate的*，但你可以使用React.memo和useMemo來(lái)優(yōu)化組件的渲染性能。

• React.memo：這是一個(gè)高階組件，用于對(duì)組件的props進(jìn)行淺比較。只有當(dāng)props發(fā)生變化時(shí)，才會(huì)重新渲染組件，這有助于避免不必要的渲染。

• useMemo：這個(gè)Hook返回一個(gè)記憶化的值。它僅會(huì)在其依賴項(xiàng)數(shù)組中的值發(fā)生變化時(shí)重新計(jì)算。這可以用于優(yōu)化昂貴的計(jì)算，避免在每次渲染時(shí)都重新執(zhí)行這些計(jì)算。