使用hooks的理由

1.高階弊端使代碼層級(jí)復(fù)雜，函數(shù)式組件可以緩解

2.處理復(fù)雜的類(lèi)生命周期

3.設(shè)計(jì)無(wú)狀態(tài)組件，因后期需要狀態(tài)

Hooks的鉤子函數(shù)

1.userState 改變狀態(tài)

2.useEffect和useLayouEffect (處理副作用)和 (同步執(zhí)行副作用)

useEffect

useEffect鉤子是所有三個(gè)生命周期方法的組合因此它允許我們?cè)诤瘮?shù)組件中訪問(wèn)生命周期方法。

可以多次注冊(cè)

回調(diào)函數(shù)只執(zhí)行一次

使用情況

不傳遞，傳遞空數(shù)組，傳遞一個(gè)，傳達(dá)多個(gè)傳遞props的對(duì)象 傳遞的useState返回的setterreturn方法

useEffect掛鉤是異步的，這有一個(gè)明顯的缺點(diǎn)即它只能在組件掛載后調(diào)用。這意味著依賴(lài)于組件布局的副作用不能使用

useLayoutEffect

1.類(lèi)似于useEffect。區(qū)別就是執(zhí)行的時(shí)機(jī)

2 .useEffect不會(huì)阻塞瀏覽器的繪制任務(wù)，他會(huì)在頁(yè)面更新之后才執(zhí)行

3 .useLayoutEffect和

mponentDidMount,componentUpdate的執(zhí)行時(shí)機(jī)一樣，會(huì)阻塞頁(yè)面的渲染，如果在里面執(zhí)行耗時(shí)任務(wù)的話(huà)，頁(yè)面就會(huì)卡頓

4 .如果需要根據(jù)新的ui來(lái)執(zhí)行特定操作，就去這里面

5 .會(huì)在瀏覽器layout之后，painting之前執(zhí)行

6.可以使用來(lái)讀取dom布局并同步觸發(fā)重渲染

7.在瀏覽器執(zhí)行繪制前useLeyoutEffect內(nèi)部的更新計(jì)劃將被同步刷新

8.盡可能地使用標(biāo)準(zhǔn)的useEffect，以避免阻塞視圖更新

useLayoutEffect hook 是同步運(yùn)行的，這意味著它會(huì)在 React 執(zhí)行完所有必要的 DOM 變更后立即運(yùn)行，但恰好在瀏覽器繪制屏幕之前運(yùn)行。它具有與useEffect hook 相同的 API和相似的語(yǔ)法。引入此 hook 是為了解決一些在使用