摘要:系列文章源碼分析第一篇源碼分析第二篇同步模式源碼分析第三篇異步狀態源碼分析第四篇歸納總結前言是在版本中的大更新,利用了閑余時間看了一些源碼,做個小記錄流程圖源碼分析先由編譯,調用,入參為,打印出來可以看到,,分別代表著元素原生元素,回調函數
系列文章
React Fiber源碼分析 第一篇
React Fiber源碼分析 第二篇(同步模式)
React Fiber源碼分析 第三篇(異步狀態)
React Fiber源碼分析 第四篇(歸納總結)
React Fiber是React在V16版本中的大更新,利用了閑余時間看了一些源碼,做個小記錄~
流程圖 源碼分析先由babel編譯, 調用reactDOM.render,入參為element, container, callback, 打印出來可以看到element,container,callback分別代表著react元素、DOM原生元素,回調函數
1.render實際上調用的是legacyRenderSubtreeIntoContainer函數
render: function (element, container, callback) { return legacyRenderSubtreeIntoContainer(null, element, container, false, callback); }
2.legacyRenderSubtreeIntoContainer 這個函數, 實際上是初始化了root, 并調用了root.render方法, 而root是由legacyCreateRootFromDOMContainer函數返回的
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 { // 調用root的render方法 root.render(children, callback); } }); } else { ...... } }
3.從代碼中看出, legacyCreateRootFromDOMContainer執行了兩個操作, 一個是清除掉所有的子元素, 另外一個則是返回了一個 ReactRoot實例, 這里需要注意一點, root默認是同步更新的, 即isAsync 默認為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); } }// 默認為同步狀態 var isAsync = false; return new ReactRoot(container, isAsync, shouldHydrate); }
4.從ReactRoot中, 我們把createContainer返回值賦給了 實例的_internalRoot, 往下看createContainer
function ReactRoot(container, isAsync, hydrate) { var root = createContainer(container, isAsync, hydrate); this._internalRoot = root; }
5.從createContainer看出, createContainer實際上是直接返回了createFiberRoot, 而createFiberRoot則是通過createHostRootFiber函數的返回值uninitializedFiber,并將其賦值在root對象的current上, 這里需要注意一個點就是,uninitializedFiber的stateNode的值是root, 即他們互相引用
function createContainer(containerInfo, isAsync, hydrate) { return createFiberRoot(containerInfo, isAsync, hydrate); } function createFiberRoot(containerInfo, isAsync, hydrate) { // 創建hostRoot并賦值給uninitiallizedFiber var uninitializedFiber = createHostRootFiber(isAsync); // 互相引用 var root = void 0; root = { current: uninitializedFiber, ... }; uninitializedFiber.stateNode = root;
6.最后是返回了一個fiberNode的實例, 在這里我們可以看到mode這個字段, 由于在一開始就將isAsync初始化為false, 所以mode實際上就代表了同步
在這里, 整理一下各個實例的關系,
root為ReactRoot實例,
root._internalRoot 即為fiberRoot實例,
root._internalRoot.current即為Fiber實例,
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.初始化完成, 接下來就是root.render執行了, 在這里, 先暫時忽略ReactWork, 把work._onCommit當成一個回調函數即可, 可以看到, root即FiberRoot實例被當成參數傳入了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是用來計算expirationTime,
expirationTime代表著優先級, 留在后續分析,
這里我們知道是同步更新 即 expirationTime = 1. 緊接著調用了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實例)提取出來, 并作為參數傳入調用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接下來就是React新版本異步渲染的核心了, 留在下一篇繼續解讀
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108919.html
摘要:為什么網頁性能會變高要回答這個問題,需要回頭看是單線程的知識點。在分析的過程中,發現了的源碼中使用了很多鏈式結構,回調鏈,任務鏈等,這個主要是為了增刪時性能比較高 系列文章 React Fiber源碼分析 第一篇 React Fiber源碼分析 第二篇(同步模式) React Fiber源碼分析 第三篇(異步狀態) React Fiber源碼分析 第四篇(歸納總結) 前言 Rea...
摘要:系列文章源碼分析第一篇源碼分析第二篇同步模式源碼分析第三篇異步狀態源碼分析第四篇歸納總結前言是在版本中的大更新,利用了閑余時間看了一些源碼,做個小記錄流程圖源碼分析調用時,會調用的方法,同時將新的作為參數傳進會先調用獲取一個維護兩個時間一個 系列文章 React Fiber源碼分析 第一篇 React Fiber源碼分析 第二篇(同步模式) React Fiber源碼分析 第三篇(...
摘要:因為版本將真正廢棄這三生命周期到目前為止,的渲染機制遵循同步渲染首次渲染,更新時更新時卸載時期間每個周期函數各司其職,輸入輸出都是可預測,一路下來很順暢。通過進一步觀察可以發現,預廢棄的三個生命周期函數都發生在虛擬的構建期間,也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景 前段時間準備前端招聘事項...
摘要:函數主要執行兩個操作,一個是判斷當前是否還有任務,如果沒有,則從鏈中移除。 系列文章 React Fiber源碼分析 第一篇 React Fiber源碼分析 第二篇(同步模式) React Fiber源碼分析 第三篇(異步狀態) React Fiber源碼分析 第四篇(歸納總結) 前言 React Fiber是React在V16版本中的大更新,利用了閑余時間看了一些源碼,做個小記...
摘要:對于同一層級的一組子節點,它們可以通過唯一進行區分?;谝陨先齻€前提策略,分別對以及進行算法優化。鏈表的每一個節點是,而不是在之前的虛擬節點。是當前層的第一個節點。再次提醒,是的一層。 文章首發于個人博客 這是我 Deep In React 系列的第二篇文章,如果還沒有讀過的強烈建議你先讀第一篇:詳談 React Fiber 架構(1)。 前言 我相信在看這篇文章的讀者一般都已經了解...
閱讀 2287·2021-11-10 11:35
閱讀 899·2021-09-26 09:55
閱讀 2388·2021-09-22 15:22
閱讀 2318·2021-09-22 15:17
閱讀 3683·2021-09-09 09:33
閱讀 1821·2019-08-30 11:22
閱讀 970·2019-08-30 10:57
閱讀 641·2019-08-29 16:10