useEffect與useLayoutEffect

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

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

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

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

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

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

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

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

初次渲染的界面與日志

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

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

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

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í)行時(shí)機(jī)不一樣。

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

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