摘要：系列文章源碼分析第一篇源碼分析第二篇同步模式源碼分析第三篇異步狀態(tài)源碼分析第四篇?dú)w納總結(jié)前言是在版本中的大更新，利用了閑余時(shí)間看了一些源碼，做個(gè)小記錄流程圖源碼分析先由編譯，調(diào)用，入?yún)椋蛴〕鰜?lái)可以看到，，分別代表著元素原生元素，回調(diào)函數(shù)

React Fiber源碼分析 第一篇
React Fiber源碼分析 第二篇（同步模式）
React Fiber源碼分析 第三篇（異步狀態(tài)）
React Fiber源碼分析 第四篇（歸納總結(jié)）

React Fiber是React在V16版本中的大更新，利用了閑余時(shí)間看了一些源碼，做個(gè)小記錄~

先由babel編譯， 調(diào)用reactDOM.render，入?yún)?strong>element, container, callback， 打印出來(lái)可以看到element，container，callback分別代表著react元素、DOM原生元素，回調(diào)函數(shù)

1.render實(shí)際上調(diào)用的是legacyRenderSubtreeIntoContainer函數(shù)

render: function (element, container, callback) {
  return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
}

2.legacyRenderSubtreeIntoContainer 這個(gè)函數(shù)， 實(shí)際上是初始化了root， 并調(diào)用了root.render方法， 而root是由legacyCreateRootFromDOMContainer函數(shù)返回的

function legacyRenderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback) {
  var root = container._reactRootContainer;
  if (!root) {
    // 初始化root
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);// Initial mount should not be batched.
    unbatchedUpdates(function () {
      if (parentComponent != null) {
        root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
      } else {
        // 調(diào)用root的render方法
        root.render(children, callback);
      }
    });
  } else {
    ......
  }
}

3.從代碼中看出， legacyCreateRootFromDOMContainer執(zhí)行了兩個(gè)操作， 一個(gè)是清除掉所有的子元素， 另外一個(gè)則是返回了一個(gè) ReactRoot實(shí)例， 這里需要注意一點(diǎn)， root默認(rèn)是同步更新的， 即isAsync 默認(rèn)為false

function legacyCreateRootFromDOMContainer(container, forceHydrate) {
  ...// 清除所有子元素
  if (!shouldHydrate) {
    var warned = false;
    var rootSibling = void 0;
    while (rootSibling = container.lastChild) {
      {
        if (!warned && rootSibling.nodeType === ELEMENT_NODE && rootSibling.hasAttribute(ROOT_ATTRIBUTE_NAME)) {
          warned = true;
        }
      }
      container.removeChild(rootSibling);
    }
  }// 默認(rèn)為同步狀態(tài)
  var isAsync = false;
  return new ReactRoot(container, isAsync, shouldHydrate);
}

4.從ReactRoot中， 我們把createContainer返回值賦給了 實(shí)例的_internalRoot， 往下看createContainer

function ReactRoot(container, isAsync, hydrate) {
  var root = createContainer(container, isAsync, hydrate);
  this._internalRoot = root;
}

5.從createContainer看出， createContainer實(shí)際上是直接返回了createFiberRoot, 而createFiberRoot則是通過(guò)createHostRootFiber函數(shù)的返回值uninitializedFiber，并將其賦值在root對(duì)象的current上， 這里需要注意一個(gè)點(diǎn)就是，uninitializedFiber的stateNode的值是root， 即他們互相引用

function createContainer(containerInfo, isAsync, hydrate) {
  return createFiberRoot(containerInfo, isAsync, hydrate);
}
function createFiberRoot(containerInfo, isAsync, hydrate) {
  // 創(chuàng)建hostRoot并賦值給uninitiallizedFiber
  var uninitializedFiber = createHostRootFiber(isAsync);
  // 互相引用
  var root = void 0;
  root = {
      current: uninitializedFiber,
      ...
  };
 uninitializedFiber.stateNode = root; 

6.最后是返回了一個(gè)fiberNode的實(shí)例， 在這里我們可以看到mode這個(gè)字段， 由于在一開(kāi)始就將isAsync初始化為false， 所以mode實(shí)際上就代表了同步

在這里， 整理一下各個(gè)實(shí)例的關(guān)系，

root為ReactRoot實(shí)例，

root._internalRoot 即為fiberRoot實(shí)例，

root._internalRoot.current即為Fiber實(shí)例，

root._internalRoot.current.stateNode = root._internalRoot

function createHostRootFiber(isAsync) {
  var mode = isAsync ? AsyncMode | StrictMode : NoContext;
  return createFiber(HostRoot, null, null, mode);
}
var createFiber = function (tag, pendingProps, key, mode) {
  return new FiberNode(tag, pendingProps, key, mode);
};
function FiberNode(tag, pendingProps, key, mode) {
  // Instance
  this.tag = tag;
  this.key = key;
  this.type = null;
  this.stateNode = null;

  // Fiber
  this.return = null;
  this.child = null;
  this.sibling = null;
  this.index = 0;

  ...
}

7.初始化完成， 接下來(lái)就是root.render執(zhí)行了， 在這里， 先暫時(shí)忽略ReactWork, 把work._onCommit當(dāng)成一個(gè)回調(diào)函數(shù)即可， 可以看到， root即FiberRoot實(shí)例被當(dāng)成參數(shù)傳入了updateContsainer里面， 往下看updateContainer

ReactRoot.prototype.render = function (children, callback) {
  var root = this._internalRoot;
  var work = new ReactWork();
  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    work.then(callback);
  }
  updateContainer(children, root, null, work._onCommit);
  return work;
};

8.updateContsainer里面使用了 currentTime 和 expirationTime,

currentTime是用來(lái)計(jì)算expirationTime,

expirationTime代表著優(yōu)先級(jí)， 留在后續(xù)分析，

這里我們知道是同步更新 即 expirationTime = 1. 緊接著調(diào)用了updateContainerAtExpirationTime

function updateContainer(element, container, parentComponent, callback) {
  var current$$1 = container.current;
  var currentTime = requestCurrentTime();
  var expirationTime = computeExpirationForFiber(currentTime, current$$1);
  return updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback);
}

9.updateContainerAtExpirationTime將current（即Fiber實(shí)例）提取出來(lái)， 并作為參數(shù)傳入調(diào)用scheduleRootUpdate

function updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback) {
  // TODO: If this is a nested container, this won"t be the root.
  var current$$1 = container.current;
  ...
  return scheduleRootUpdate(current$$1, element, expirationTime, callback);
}

到了這里告一段落， scheduleRootUpdate接下來(lái)就是React新版本異步渲染的核心了， 留在下一篇繼續(xù)解讀