日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網(wǎng)站首頁 編程語言 正文

React深入分析useEffect源碼_React

作者:goClient1992 ? 更新時間: 2022-12-06 編程語言

熱身準備

這里不再講useLayoutEffect,它和useEffect的代碼是一樣的,區(qū)別主要是:

  • 執(zhí)行時機不同;
  • useEffect是異步, useLayoutEffect是同步,會阻塞渲染;

初始化 mount

mountEffect

在所有hook初始化時都會通過下面這行代碼實現(xiàn)hook結(jié)構(gòu)的初始化和存儲,這里不再講mountWorkInProgressHook方法

var hook = mountWorkInProgressHook();

mountEffect方法中,只有這幾行代碼。先來解讀下幾個參數(shù):

  • fiberFlags:有副作用的更新標記,用來標記hook所在的fiber
  • hookFlags:副作用標記;
  • create:使用者傳入的回調(diào)函數(shù);
  • deps:使用者傳入的數(shù)組依賴;
function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
  // hook初始化
  var hook = mountWorkInProgressHook();
  // 判斷是否有傳入deps,如果有會作為下次更新的deps
  var nextDeps = deps === undefined ? null : deps;
  // 給hook所在的fiber打上有副作用的更新的標記
  currentlyRenderingFiber$1.flags |= fiberFlags;
  // 將副作用操作存放到fiber.memoizedState.hook.memoizedState中
  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, undefined, nextDeps);
}

上面代碼中都有注釋,接下來我們看看React是如何存放副作用更新操作的,主要就是pushEffect方法

function pushEffect(tag, create, destroy, deps) {
  // 初始化副作用結(jié)構(gòu),
  var effect = {
    tag: tag,
    create: create,   // 回調(diào)函數(shù)
    destroy: destroy,  // 回調(diào)函數(shù)里的return(mount時是undefined)
    deps: deps,    // 依賴數(shù)組
    // 閉環(huán)鏈表
    next: null
  };
  // 下面的一大段代碼看著復雜,但是有沒有很熟悉的感覺?
  var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue;
  if (componentUpdateQueue === null) {
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    currentlyRenderingFiber$1.updateQueue = componentUpdateQueue;
    // effect.next = effect形成環(huán)形鏈表
    componentUpdateQueue.lastEffect = effect.next = effect;   
  } else {
    var lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      var firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }
  return effect;
}

上面這段代碼除了初始化副作用的結(jié)構(gòu)代碼外,都是我們前面講過的操作閉環(huán)鏈表,向鏈表末尾添加新的effect,該effect.next指向fisrtEffect,并且鏈表當前的指針指向最新添加的effect

useEffect的初始化就這么簡單,簡單總結(jié)一下:給hook所在的fiber打上副作用更新標記,并且fiber.memoizedState.hook.memoizedStatefiber.updateQueue存儲了相關的副作用,這些副作用通過閉環(huán)鏈表的結(jié)構(gòu)存儲。

相關參考視頻講解:傳送門

更新 update

updateEffect

updateWorkInProgressHook在上篇文章也已講過,不再詳述,主要功能就是創(chuàng)建一個帶有回調(diào)函數(shù)的newHook去覆蓋之前的hook

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var destroy = undefined;
  if (currentHook !== null) {
    var prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      var prevDeps = prevEffect.deps;
      // 比較兩次依賴數(shù)組中的值是否有變化
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 和之前初始化時一樣
        pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }
  // 和之前初始化時一樣
  currentlyRenderingFiber$1.flags |= fiberFlags;
  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
}

相信眼眼尖的看官已經(jīng)注意到上面代碼中有兩個pushEffect,一個沒有賦值給hook.memoizedState,一個賦值了,這兩者有什么區(qū)別呢?

先保留著這個疑問,先來了解下下面這行代碼都做了些什么,因為它造就了兩個pushEffect

if (areHookInputsEqual(nextDeps, prevDeps)){...}

function areHookInputsEqual(nextDeps, prevDeps) {
  // 沒有傳deps的情況返回false
  if (prevDeps === null) {
    return false;
  }
  // deps不是[],且其中的值有變動才會返回false
  for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (objectIs(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  // deps = [],或者deps里面的值沒有變化會返回true
  return true;
}

它會判斷兩次依賴數(shù)組中的值是否有變化以及deps是否是空數(shù)組來決定返回truefalse,返回true表明這次不需要調(diào)用回調(diào)函數(shù)。

現(xiàn)在我們明白了兩次pushEffect的異同,if內(nèi)部的pushEffect是不需要調(diào)用的回調(diào)函數(shù), 外面的pushEffect是需要調(diào)用的。再來仔細看下這兩行代碼:

// if內(nèi)部的,第一個參數(shù)是hookFlags = 4
pushEffect(hookFlags, create, destroy, nextDeps);
// if外部的,第一個參數(shù)是HasEffect | hookFlags = 5
hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);

這兩行代碼的區(qū)別是傳入的第一個參數(shù)不同,而第一個參數(shù)就是effect.tag的值,effect.tag = 4不會添加到副作用執(zhí)行隊列,而effect.tag = 5可以。沒有添加到副作用執(zhí)行隊列的effect就不會執(zhí)行。這樣就巧妙的實現(xiàn)了useEffect基于deps來判斷是否需要執(zhí)行回調(diào)函數(shù)。

到這里, 我們搞明白了,不管useEffect里的deps有沒有變化都會為回調(diào)函數(shù)創(chuàng)建effect并添加到effect鏈表和fiber.updateQueue中,但是React會根據(jù)effect.tag來決定該effect是否要添加到副作用執(zhí)行隊列中去執(zhí)行。

執(zhí)行副作用

我們現(xiàn)在知道了,useEffect是異步執(zhí)行的。那么這個回調(diào)函數(shù)副作用會在什么時候執(zhí)行呢?useEffect回調(diào)函數(shù)會在layout階段之后執(zhí)行。現(xiàn)在我們來了解下具體調(diào)用執(zhí)行的流程。

我畫了一個簡單的流程圖,大致描述了下調(diào)用流程。首先在mutation之前階段,基于副作用創(chuàng)建任務并放到taskQueue中,同時會執(zhí)行requestHostCallback,這個方法就涉及到了異步了,它首先考慮使用MessageChannel實現(xiàn)異步,其次會考慮使用setTimeout實現(xiàn)。使用MessageChannel時,requestHostCallback會馬上執(zhí)行port.postMessage(null);,這樣就可以在異步的第一時間執(zhí)行workLoopworkLoop會遍歷taskQueue,執(zhí)行任務,如果是useEffecteffect任務,會調(diào)用flusnPassiveEffects

Q:可能有人會疑惑為什么優(yōu)先考慮MessageChannel

A: 首先我們要明白React調(diào)度更新的目的是為了時間分片,意思是每隔一段時間就把主線程還給瀏覽器,避免長時間占用主線程導致頁面卡頓。使用MessageChannelSetTimeout的目的都是為了創(chuàng)建宏任務,因為宏任務會在當前微任務都執(zhí)行完后,等到瀏覽器主線程空閑后才會執(zhí)行。不優(yōu)先考慮setTimeout的原因是,setTimeout執(zhí)行時間不準確,會造成時間浪費,即使是setTimeout(fn, 0),感興趣的可以去自己了解下,本文不做贅述了。

schedulePassiveEffects中,會決定是否執(zhí)行effect鏈表中的effect,判斷的依據(jù)就是每個effect上的effect.tag:

function schedulePassiveEffects(finishedWork) {
  var updateQueue = finishedWork.updateQueue;
  var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  if (lastEffect !== null) {
    var firstEffect = lastEffect.next;
    var effect = firstEffect;
    // 遍歷effect鏈表
    do {
      var _effect = effect,
          next = _effect.next,
          tag = _effect.tag;
      // 基于effect.tag決定是否添加到副作用執(zhí)行隊列
      if ((tag & Passive$1) !== NoFlags$1 && (tag & HasEffect) !== NoFlags$1) {
        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
      }
      effect = next;
    } while (effect !== firstEffect);
  }
}

flushPassiveEffects中,會先執(zhí)行上次更新動作的銷毀函數(shù),然后再執(zhí)行本次更新動作的回調(diào)函數(shù),并且會把回調(diào)函數(shù)的return作為下次更新動作的銷毀函數(shù)。

function flushPassiveEffectsImpl() {
  // 執(zhí)行上次更新動作的銷毀函數(shù)
  var unmountEffects = pendingPassiveHookEffectsUnmount;
  pendingPassiveHookEffectsUnmount = [];
  for (var i = 0; i < unmountEffects.length; i += 2) {
    ...destroy()
  }
  // 執(zhí)行本次更新動作的回調(diào)函數(shù)
  var mountEffects = pendingPassiveHookEffectsMount;
  pendingPassiveHookEffectsMount = [];
  for (var _i = 0; _i < mountEffects.length; _i += 2) {
    ...create()
  }
}

上面代碼中的這兩行就是來自副作用執(zhí)行隊列,已經(jīng)過濾掉了不需要執(zhí)行的effect,只執(zhí)行該隊列上的副作用函數(shù)

var unmountEffects = pendingPassiveHookEffectsUnmount;
var mountEffects = pendingPassiveHookEffectsMount;

總結(jié)

看完這篇文章, 我們可以弄明白下面這幾個問題:

  • useEffectuseLayoutEffect的區(qū)別?
  • useEffect是怎么判斷回調(diào)函數(shù)是否需要執(zhí)行的?
  • useEffect是同步還是異步?
  • useEffect是通過什么實現(xiàn)異步的?
  • useEffect為什么要要優(yōu)先選用MessageChannel實現(xiàn)異步?

原文鏈接:https://blog.csdn.net/It_kc/article/details/127547634

欄目分類
最近更新