React16.2的fiber架构详解

本文主要和大家分享react16.2的fiber架构详解，希望能帮助到大家。insertupdateintofiber 会根据fiber的状态创建一个或两个列队对象，对象是长成这样的对象是长成这样的

//by 司徒正美， 加群：370262116 一起研究React与anujs// https://github.com/RubyLouvre/anu 欢迎加starfunction createUpdateQueue(baseState) {//我们现在是丢了一个null做传参  var queue = {    baseState: baseState,    expirationTime: NoWork,//NoWork会被立即执行    first: null,    last: null,    callbackList: null,    hasForceUpdate: false,    isInitialized: false  };  return queue;}

登录后复制

scheduleWork是一个奇怪的方法，只是添加一下参数

 function scheduleWork(fiber, expirationTime) {    return scheduleWorkImpl(fiber, expirationTime, false);  }

登录后复制

scheduleWorkImpl的最开头有一个recordScheduleUpdate方法，用来记录调度器的执行状态，如注释所示，它现在相当于什么都没有做

function recordScheduleUpdate() {  if (enableUserTimingAPI) {//全局变量，默认为true    if (isCommitting) {//全局变量，默认为false, 没有进入分支      hasScheduledUpdateInCurrentCommit = true;    }    //全局变量，默认为null，没有没有进入分支    if (currentPhase !== null && currentPhase !== 'componentWillMount' && currentPhase !== 'componentWillReceiveProps') {      hasScheduledUpdateInCurrentPhase = true;    }  }}

登录后复制

scheduleWorkImpl的一些分支非常复杂，我们打一些断点

function computeExpirationForFiber(fiber) {    var expirationTime = void 0;    if (expirationContext !== NoWork) {      // An explicit expiration context was set;      expirationTime = expirationContext;    } else if (isWorking) {      if (isCommitting) {        // Updates that occur during the commit phase should have sync priority        // by default.        expirationTime = Sync;      } else {        // Updates during the render phase should expire at the same time as        // the work that is being rendered.        expirationTime = nextRenderExpirationTime;      }    } else {      // No explicit expiration context was set, and we're not currently      // performing work. Calculate a new expiration time.      if (useSyncScheduling && !(fiber.internalContextTag & AsyncUpdates)) {        // This is a sync update        console.log("expirationTime", Sync)        expirationTime = Sync;//命中这里      } else {        // This is an async update        expirationTime = computeAsyncExpiration();      }    }    return expirationTime;  }    function checkRootNeedsClearing(root, fiber, expirationTime) {    if (!isWorking && root === nextRoot && expirationTime  expirationTime) {        node.expirationTime = expirationTime;//由于默认就是NoWork,因此会被重写 Sync      }      if (node.alternate !== null) {//这里进不去        if (node.alternate.expirationTime === NoWork || node.alternate.expirationTime > expirationTime) {          node.alternate.expirationTime = expirationTime;        }      }      if (node['return'] === null) {        if (node.tag === HostRoot) {//进入这里          var root = node.stateNode;          checkRootNeedsClearing(root, fiber, expirationTime);          console.log("requestWork",root, expirationTime)          requestWork(root, expirationTime);          checkRootNeedsClearing(root, fiber, expirationTime);        } else {          return;        }      }      node = node['return'];    }  }

登录后复制

输出如下

requestWork也很难理解，里面太多全局变量，觉得不是前端的人搞的。为了帮助理解，我们继续加日志

//by 司徒正美， 加群：370262116 一起研究React与anujs // requestWork is called by the scheduler whenever a root receives an update.  // It's up to the renderer to call renderRoot at some point in the future.  /*只要root收到更新(update对象)，requestWork就会被调度程序调用。渲染器在将来的某个时刻调用renderRoot。  */  function requestWork(root, expirationTime) {    if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {      invariant_1(false, 'Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.');    }    // Add the root to the schedule.    // Check if this root is already part of the schedule.    if (root.nextScheduledRoot === null) {      // This root is not already scheduled. Add it.      console.log("设置remainingExpirationTime",expirationTime)      root.remainingExpirationTime = expirationTime;      if (lastScheduledRoot === null) {        console.log("设置firstScheduledRoot， lastScheduledRoot")        firstScheduledRoot = lastScheduledRoot = root;        root.nextScheduledRoot = root;      } else {        lastScheduledRoot.nextScheduledRoot = root;        lastScheduledRoot = root;        lastScheduledRoot.nextScheduledRoot = firstScheduledRoot;      }    } else {      // This root is already scheduled, but its priority may have increased.      var remainingExpirationTime = root.remainingExpirationTime;      if (remainingExpirationTime === NoWork || expirationTime < remainingExpirationTime) {        // Update the priority.        root.remainingExpirationTime = expirationTime;      }    }    if (isRendering) {      // Prevent reentrancy. Remaining work will be scheduled at the end of      // the currently rendering batch.      return;    }    if (isBatchingUpdates) {      // Flush work at the end of the batch.      if (isUnbatchingUpdates) {        // ...unless we're inside unbatchedUpdates, in which case we should        // flush it now.        nextFlushedRoot = root;        nextFlushedExpirationTime = Sync;        console.log("performWorkOnRoot")        performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime);      }      return;    }    // TODO: Get rid of Sync and use current time?    if (expirationTime === Sync) {      console.log("进入performWork")      performWork(Sync, null);    } else {      scheduleCallbackWithExpiration(expirationTime);    }  }

登录后复制

从日志输出来看，requestWork只是修改了两个全局变量，然后进入performWork。这三个内部方法起名很有意思。scheduleWork意为打算工作，requestWork意为申请工作，performWork意为努力工作（正式上班）

function performWork(minExpirationTime, dl) {    deadline = dl;    // Keep working on roots until there's no more work, or until the we reach    // the deadline.    //这里会将root设置为highestPriorityRoot    findHighestPriorityRoot();    if (enableUserTimingAPI && deadline !== null) {      var didExpire = nextFlushedExpirationTime < recalculateCurrentTime();      console.log(didExpire)      stopRequestCallbackTimer(didExpire);    }    while (nextFlushedRoot !== null       && nextFlushedExpirationTime !== NoWork       && (minExpirationTime === NoWork || nextFlushedExpirationTime <= minExpirationTime)       && !deadlineDidExpire) {      console.log("performWorkOnRoot")      performWorkOnRoot(highestPriorityRoot, nextFlushedExpirationTime);      // Find the next highest priority work.      findHighestPriorityRoot();    }    // We're done flushing work. Either we ran out of time in this callback,    // or there's no more work left with sufficient priority.    // If we're inside a callback, set this to false since we just completed it.    if (deadline !== null) {      callbackExpirationTime = NoWork;      callbackID = -1;    }    // If there's work left over, schedule a new callback.    if (nextFlushedExpirationTime !== NoWork) {      console.log("scheduleCallbackWithExpiration")      scheduleCallbackWithExpiration(nextFlushedExpirationTime);    }    // Clean-up.    deadline = null;    deadlineDidExpire = false;    nestedUpdateCount = 0;    if (hasUnhandledError) { //如果有没处理的错误则throw      var _error4 = unhandledError;      unhandledError = null;      hasUnhandledError = false;      throw _error4;    }  }

登录后复制

我们终于进入performWorkOnRoot，performWorkOnRoot的作用是区分同步渲染还是异步渲染，expirationTime等于1，因此进入同步。导步肯定为false

// https://github.com/RubyLouvre/anu 欢迎加starfunction performWorkOnRoot(root, expirationTime) {    isRendering = true;    // Check if this is async work or sync/expired work.    // TODO: Pass current time as argument to renderRoot, commitRoot    if (expirationTime <= recalculateCurrentTime()) {      // Flush sync work.           var finishedWork = root.finishedWork;      console.log("Flush sync work.", finishedWork)      if (finishedWork !== null) {        // This root is already complete. We can commit it.        root.finishedWork = null;        console.log("commitRoot")        root.remainingExpirationTime = commitRoot(finishedWork);      } else {        root.finishedWork = null;        console.log("renderRoot")        finishedWork = renderRoot(root, expirationTime);        if (finishedWork !== null) {          console.log("继续commitRoot")          // We've completed the root. Commit it.          root.remainingExpirationTime = commitRoot(finishedWork);        }      }    } else {      console.log("Flush async work.")      // Flush async work.      // ...略    }    isRendering = false;  }

登录后复制

renderRoot也是怒长，React16代码的特点是许多巨型类，巨型方法，有JAVA之遗风。renderRoot只有前面几行是可能处理虚拟DOM（或叫fiber）,后面都是错误边界的

function renderRoot(root, expirationTime) {       isWorking = true;    // We're about to mutate the work-in-progress tree. If the root was pending    // commit, it no longer is: we'll need to complete it again.    root.isReadyForCommit = false;    // Check if we're starting from a fresh stack, or if we're resuming from    // previously yielded work.    if (root !== nextRoot || expirationTime !== nextRenderExpirationTime || nextUnitOfWork === null) {      // Reset the stack and start working from the root.      resetContextStack();      nextRoot = root;      nextRenderExpirationTime = expirationTime;      //可能是用来工作的代码       console.log("createWorkInProgress")      nextUnitOfWork = createWorkInProgress(nextRoot.current, null, expirationTime);    }    //可能是用来工作的代码     console.log("startWorkLoopTimer")    startWorkLoopTimer(nextUnitOfWork);   // 处理错误边界    var didError = false;    var error = null;    invokeGuardedCallback$1(null, workLoop, null, expirationTime);    // An error was thrown during the render phase.    while (didError) {       console.log("componentDidCatch的相关实现")      if (didFatal) {        // This was a fatal error. Don't attempt to recover from it.        firstUncaughtError = error;        break;      }      var failedWork = nextUnitOfWork;      if (failedWork === null) {        // An error was thrown but there's no current unit of work. This can        // happen during the commit phase if there's a bug in the renderer.        didFatal = true;        continue;      }      // 处理错误边界      var boundary = captureError(failedWork, error);      !(boundary !== null) ? invariant_1(false, 'Should have found an error boundary. This error is likely caused by a bug in React. Please file an issue.') : void 0;      if (didFatal) {        // The error we just captured was a fatal error. This happens        // when the error propagates to the root more than once.        continue;      }       // 处理错误边界      didError = false;      error = null;      // We're finished working. Exit the error loop.      break;    }   // 处理错误边界    var uncaughtError = firstUncaughtError;    // We're done performing work. Time to clean up.    stopWorkLoopTimer(interruptedBy);    interruptedBy = null;    isWorking = false;    didFatal = false;    firstUncaughtError = null;     // 处理错误边界    if (uncaughtError !== null) {      onUncaughtError(uncaughtError);    }    return root.isReadyForCommit ? root.current.alternate : null;  }  function resetContextStack() {    // Reset the stack    reset$1();    // Reset the cursors    resetContext();    resetHostContainer();  }function reset$1() {  console.log("reset",index)  while (index > -1) {    valueStack[index] = null;    {      fiberStack[index] = null;    }    index--;  }}function resetContext() {  consoel.log("resetContext")  previousContext = emptyObject_1;  contextStackCursor.current = emptyObject_1;  didPerformWorkStackCursor.current = false;}  function resetHostContainer() {    console.log("resetHostContainer",contextStackCursor, rootInstanceStackCursor, NO_CONTEXT )    contextStackCursor.current = NO_CONTEXT;    rootInstanceStackCursor.current = NO_CONTEXT;  }

登录后复制

createWorkInProgress就是将根组件的fiber对象再复制一份，变成其alternate属性。因此将虚拟DOM转换为真实DOM的重任就交给invokeGuardedCallback

var invokeGuardedCallback = function (name, func, context, a, b, c, d, e, f) {  ReactErrorUtils._hasCaughtError = false;  ReactErrorUtils._caughtError = null;  var funcArgs = Array.prototype.slice.call(arguments, 3);  try {    func.apply(context, funcArgs);  } catch (error) {    ReactErrorUtils._caughtError = error;    ReactErrorUtils._hasCaughtError = true;  }//这下面还有怒长（100－150L ）的关于错误边界的处理，略过};

登录后复制

func为workLoop

//by 司徒正美， 加群：370262116 一起研究React与anujs function workLoop(expirationTime) {    if (capturedErrors !== null) {      // If there are unhandled errors, switch to the slow work loop.      // TODO: How to avoid this check in the fast path? Maybe the renderer      // could keep track of which roots have unhandled errors and call a      // forked version of renderRoot.      slowWorkLoopThatChecksForFailedWork(expirationTime);      return;    }    if (nextRenderExpirationTime === NoWork || nextRenderExpirationTime > expirationTime) {      return;    }    if (nextRenderExpirationTime <= mostRecentCurrentTime) {      // Flush all expired work.      while (nextUnitOfWork !== null) {        console.log("performUnitOfWork",nextUnitOfWork)        nextUnitOfWork = performUnitOfWork(nextUnitOfWork);      }    } else {      // Flush asynchronous work until the deadline runs out of time.      while (nextUnitOfWork !== null && !shouldYield()) {        nextUnitOfWork = performUnitOfWork(nextUnitOfWork);      }    }  }

登录后复制

我们终于看到工作的代码了。这个nextUnitOfWork 是renderRoot生成的
performUnitOfWork与beginWork的代码，里面会根据fiber的tag进入各种操作

//by 司徒正美， 加群：370262116 一起研究React与anujs// https://github.com/RubyLouvre/anu 欢迎加starfunction performUnitOfWork(workInProgress) {    // The current, flushed, state of this fiber is the alternate.    // Ideally nothing should rely on this, but relying on it here    // means that we don't need an additional field on the work in    // progress.    var current = workInProgress.alternate;    // See if beginning this work spawns more work.    startWorkTimer(workInProgress);    {      ReactDebugCurrentFiber.setCurrentFiber(workInProgress);    }    console.log("beginWork")    var next = beginWork(current, workInProgress, nextRenderExpirationTime);    {      ReactDebugCurrentFiber.resetCurrentFiber();    }    if (true && ReactFiberInstrumentation_1.debugTool) {      ReactFiberInstrumentation_1.debugTool.onBeginWork(workInProgress);    }    if (next === null) {      console.log("next")      // If this doesn't spawn new work, complete the current work.      next = completeUnitOfWork(workInProgress);    }    ReactCurrentOwner.current = null;    return next;  }function beginWork(current, workInProgress, renderExpirationTime) {    if (workInProgress.expirationTime === NoWork || workInProgress.expirationTime > renderExpirationTime) {      return bailoutOnLowPriority(current, workInProgress);    }    switch (workInProgress.tag) {      case IndeterminateComponent:        return mountIndeterminateComponent(current, workInProgress, renderExpirationTime);      case FunctionalComponent:        return updateFunctionalComponent(current, workInProgress);      case ClassComponent:        return updateClassComponent(current, workInProgress, renderExpirationTime);      case HostRoot:        return updateHostRoot(current, workInProgress, renderExpirationTime);      case HostComponent:        return updateHostComponent(current, workInProgress, renderExpirationTime);      case HostText:        return updateHostText(current, workInProgress);      case CallHandlerPhase:        // This is a restart. Reset the tag to the initial phase.        workInProgress.tag = CallComponent;      // Intentionally fall through since this is now the same.      case CallComponent:        return updateCallComponent(current, workInProgress, renderExpirationTime);      case ReturnComponent:        // A return component is just a placeholder, we can just run through the        // next one immediately.        return null;      case HostPortal:        return updatePortalComponent(current, workInProgress, renderExpirationTime);      case Fragment:        return updateFragment(current, workInProgress);      default:        invariant_1(false, 'Unknown unit of work tag. This error is likely caused by a bug in React. Please file an issue.');    }  }

登录后复制

我们再调查一下workInProgress.tag是什么

https://github.com/facebook/r…

这里有全部fiber节点的类型描述，我们创建一个对象

// https://github.com/RubyLouvre/anu 欢迎加starvar mapBeginWork = {    3: "HostRoot 根组件",    0: "IndeterminateComponent 只知道type为函数",    2: "ClassComponent 普通类组件" ,    5: "HostComponent 元素节点",    6: "HostText 文本节点"  }  function beginWork(current, workInProgress, renderExpirationTime) {    if (workInProgress.expirationTime === NoWork || workInProgress.expirationTime > renderExpirationTime) {      return bailoutOnLowPriority(current, workInProgress);    }    console.log(workInProgress.tag, mapBeginWork[workInProgress.tag])     switch (workInProgress.tag) {     //略     }}

登录后复制