useEffect與useLayoutEffect

yibinnn 發布于2019-08-23 14:15 / 2366人閱讀

摘要：當某個無狀態組件要在某個階段執行這些鉤子，它會優先執行清理函數再執行初始函數。并且發現的函數會在最后才執行，它會晚于包含它的父函數。當目前還是實驗性質，不排除會改變。不好用，不像那么明顯可以與有狀態組件的生命周期鉤子相對應。

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

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

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

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

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

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

初次渲染的界面與日志

如果我們向input輸入內容，就會發現它每次都會先進行 useEffect與useLayout的清理函數，再執行他們的初始函數。并且發現useEffect的函數會在最后才執行，它會晚于包含它的父函數。我們可以點擊頁面上的h1標簽，就可以證明這一點。

點擊h1會不斷遞增數字，到10時會銷供Example這個無狀態組件與它的子組件Child。下面是數字到10時的界面與日志。

在我的迷你React框架中是這樣實現這兩個鉤子

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);
    },
    //略...
};

它們就是執行時機不一樣。

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

React Hook是一個很棒的設計，它其實是將有狀態組件的更新機制(setState/forceUpdate)的內部實現進行了更廣泛的應用。當它的API穩定下來我會與大家分享它們更深層次的實現。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100330.html

十個案例學會 React Hooks

摘要：在線傳遞給的是而不是，返回值即是想要透傳的數據了。所以函數組件在每次渲染的時候如果有傳遞函數的話都會重渲染子組件。在學會使用React Hooks之前，可以先看一下相關原理學習React Hooks 前言在 React 的世界中，有容器組件和 UI 組件之分，在 React Hooks 出現之前，UI 組件我們可以使用函數，無狀態組件來展示 UI，而對于容器組件，函數組件就顯得無能為力，我...

williamwen1986 2019-05-23 14:14 評論0 收藏0
03. 該嘗嘗React Hook了。

摘要：我們統一把這些操作稱為副作用，或者簡稱為作用。盡可能使用標準的以避免阻塞視覺更新。大多數情況下，不需要同步地執行。返回的對象在組件的整個生命周期內保持不變。當對象內容發生變化時，并不會通知你。 Hook Hook 是 React 16.8.0 的新增特性。 Hook 使你在非 class 的情況下可以使用更多的 React 特性。Hook 不能在 class 組件中使用。使用規則： ...

cikenerd 2019-08-26 10:43 評論0 收藏0
如何用ahooks控制時機的hook？

　　本篇主要和大家溝通關于ahooks ，我們可以理解為加深對 React hooks 的了解。　　我們先說下關于抽象自定義 hooks。構建屬于自己的 React hooks 工具庫。　　其實我們應該培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。　　注：本系列對 ahooks 的源碼解析是基于v3.3.13。　　現在就進入主題用ahooks 來封裝 React要注意的時機？　　Fun...

3403771864 2022-11-05 16:52 評論0 收藏0
react hooks 全面轉換攻略(二) react本篇剩余 api

摘要：不知道大家有沒有使用過他的作用和中的差不多吧在需要讀取的高度寬度的時候特別需要說到現在基本已經講完了除了我將會放在篇中講述相關文章全面轉換攻略一本篇之全面轉換攻略二本篇剩余全面轉換攻略三全局存儲解決方案 useCallback,useMemo 因為這兩個 api 的作用是一樣的,所以我放在一起講; 語法: function useMemo(factory: () => T, deps:...

molyzzx 2019-08-23 16:56 評論0 收藏0
解讀useEvent顯著降低Hooks負擔的原生Hook

　　想要做到就要有更多的學習，你知道為什么React不把他們設為默認方法#useEvent是一個剛剛提案的原生Hook，還處于RFC。現在我們就一起來討論下　　RFC：Request for Comments 提案應用的還十分廣泛　　我們先看看在沒有 useEvent 會出現的情況：　　functionChat(){ 　　const[text,setText]=useState(''...

3403771864 2022-10-22 22:44 評論0 收藏0