useEffect與useLayoutEffect

yibinnn 發(fā)布于2019-08-23 14:15 / 2436人閱讀

摘要：當(dāng)某個無狀態(tài)組件要在某個階段執(zhí)行這些鉤子，它會優(yōu)先執(zhí)行清理函數(shù)再執(zhí)行初始函數(shù)。并且發(fā)現(xiàn)的函數(shù)會在最后才執(zhí)行，它會晚于包含它的父函數(shù)。當(dāng)目前還是實(shí)驗(yàn)性質(zhì)，不排除會改變。不好用，不像那么明顯可以與有狀態(tài)組件的生命周期鉤子相對應(yīng)。

React Hook讓無狀態(tài)組件擁有了許多只有有狀態(tài)組件的能力，如自更新能力（setState，使用useState），訪問ref（使用useRef或useImperativeMethods），訪問context(使用useContext)，使用更高級的setState設(shè)置（useReducer），及進(jìn)行類似生命周期的階段性方法（useEffect或useLayoutEffect）。

當(dāng)然還有一些Hook，帶來了一些新功能，如useCallback，這是對事件句柄進(jìn)行緩存，useState的第二個返回值是dispatch，但是每次都是返回新的，使用useCallback，可以讓它使用上次的函數(shù)。在虛擬DOM更新過程中，如果事件句柄相同，那么就不用每次都進(jìn)行removeEventListner與addEventListner。最后就是useMemo，取得上次緩存的數(shù)據(jù)，它可以說是useCallback的另一種形式。

useState： setState 
useReducer： setState 
useRef: ref
useImperativeMethods: ref 
useContext: context 
useCallback:可以對setState的優(yōu)化 
useMemo: useCallback的變形 
useLayoutEffect:類似componentDidMount/Update, componentWillUnmount 
useEffect: 類似于setState(state, cb)中的cb，總是在整個更新周期的最后才執(zhí)行

從上面的描述來看useEffect的時期是非常晚，可以保證頁面是穩(wěn)定下來再做事情。但是useEffect與useLayoutEffect與有狀態(tài)組件的生命周期鉤子又有一點(diǎn)不一樣。

useEffect(function(){
  //dosomething
  return function(){
  //dosomething     
  }
 }, inputs)

useEffect與useLayoutEffect的第一個參數(shù)是一個函數(shù)（初始函數(shù)），這函數(shù)還會返回另一個清理用的函數(shù)（清理函數(shù)，在官方文檔中沒有明確的文字，都注釋使用了clean up的字眼，就姑且這樣叫）。當(dāng)某個無狀態(tài)組件要在某個階段執(zhí)行這些鉤子，它會優(yōu)先執(zhí)行清理函數(shù)再執(zhí)行初始函數(shù)。

初次渲染的界面與日志

如果我們向input輸入內(nèi)容，就會發(fā)現(xiàn)它每次都會先進(jìn)行 useEffect與useLayout的清理函數(shù)，再執(zhí)行他們的初始函數(shù)。并且發(fā)現(xiàn)useEffect的函數(shù)會在最后才執(zhí)行，它會晚于包含它的父函數(shù)。我們可以點(diǎn)擊頁面上的h1標(biāo)簽，就可以證明這一點(diǎn)。

點(diǎn)擊h1會不斷遞增數(shù)字，到10時會銷供Example這個無狀態(tài)組件與它的子組件Child。下面是數(shù)字到10時的界面與日志。

在我的迷你React框架中是這樣實(shí)現(xiàn)這兩個鉤子

export function useEffect(create, inputs) {
    return dispatcher.useEffect(create, inputs, PASSIVE, "passive", "unpassive");
}
export function useLayoutEffect(create, inputs) {
    return dispatcher.useEffect(create, inputs, HOOK, "layout", "unlayout");
}
export var dispatcher = {
    //略...
    useEffect(create, inputs, EffectTag, createList, destoryList) {
        let fiber = getCurrentFiber();
        let cb = dispatcher.useCallbackOrMemo(create, inputs);
        if (fiber.effectTag % EffectTag) {
            fiber.effectTag *= EffectTag;
        }
        let updateQueue = fiber.updateQueue;
        let list = updateQueue[createList] ||  (updateQueue[createList] = []);
        updateQueue[destoryList] ||  (updateQueue[destoryList] = []);
        list.push(cb);
    },
    //略...
};

它們就是執(zhí)行時機(jī)不一樣。

當(dāng)目前React Hook還是實(shí)驗(yàn)性質(zhì)，不排除會改變。目前有9種鉤子，其實(shí)之前有十種，useMutationEffect前不久已經(jīng)完蛋了。useMemo與useCallback很相近，但覺得useMemo的使用場合很少，不知它會不會廢掉。useEffect不好用，不像useLayoutEffect那么明顯可以與有狀態(tài)組件的生命周期鉤子相對應(yīng)。useImperativeMethods這個名字起得不好，可能以后也會調(diào)整。當(dāng)然這只是我的看法。

React Hook是一個很棒的設(shè)計(jì)，它其實(shí)是將有狀態(tài)組件的更新機(jī)制(setState/forceUpdate)的內(nèi)部實(shí)現(xiàn)進(jìn)行了更廣泛的應(yīng)用。當(dāng)它的API穩(wěn)定下來我會與大家分享它們更深層次的實(shí)現(xiàn)。