深入FiberRoot

hoohack 發布于2019-08-23 16:45 / 2430人閱讀

摘要：節點的鏈表交互的線程上次交互的線程的對象進行中的交互的線程的對象

1. 介紹

整個應用的起點

包含應用掛載的目標起點

記錄整個應用更新過程的各種信息

2.相關函數及內容

export function createContainer(
  containerInfo: Container,
  isConcurrent: boolean,
  hydrate: boolean,
): OpaqueRoot {
  return createFiberRoot(containerInfo, isConcurrent, hydrate);
}

在createContainer中我們返回了createFiberRoot函數的執行結果，
然就在ReactFiberRoot中我們調用了createFiberRoot，，它返回一個root對象：

root = ({
      current: uninitializedFiber,
        // 代表當前對應的fiber，這里是未初始化的fiber
      containerInfo: containerInfo,
        // 代表容器的節點
      pendingChildren: null,
        //只有在持久化更新的平臺會用到，在react-Dom中不會被用到
      earliestPendingTime: NoWork,
         //最老的正在進行中的任務，這里初始化都為Nowork為0，最低優先級
      latestPendingTime: NoWork,
          //最新的正在進行中的任務
      earliestSuspendedTime: NoWork,
          //最老的被掛起的任務
      latestSuspendedTime: NoWork,
          //最新的被掛起的任務
      latestPingedTime: NoWork,
            
      pingCache: null,

      didError: false,
       //標記整個應用在渲染的過程中是否有錯誤
      pendingCommitExpirationTime: NoWork,
      //正在提交的任務的ExpirationTime，也就是優先級
      finishedWork: null,
      //在render階段已經完成了的任務，在commit階段只會執行finishedWork的任務
      timeoutHandle: noTimeout,
      //用來清理還沒有被觸發的計時器
      context: null,
      //頂層的context對象，只用在調用“renderSubTreeIntoContainer”的時候在有用
      pendingContext: null,
      hydrate,
      //應用是否要和原來的dom節點進行合并
      nextExpirationTimeToWorkOn: NoWork,
      //記錄下一次將要進行的對應的優先級的任務
      expirationTime: NoWork,
      //當前的優先級的任務
      firstBatch: null,
      
      nextScheduledRoot: null,
        //鏈表的結構，兩次react-Domrender渲染的。。節點的鏈表
      interactionThreadID: unstable_getThreadID(),
      // 交互的線程id
      memoizedInteractions: new Set(),
      //上次交互的線程id的Set對象
      pendingInteractionMap: new Map(),
      //進行中的交互的線程的Map對象
    }: FiberRoot);

GPU云服務器云服務器 FiberRoot 深入深入分析深入云計算

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

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

react解析: render的FiberRoot(三)

摘要：查看創建核心函數源碼行調用函數創建是相關，不用管源碼行這個指的是調用創建，下面我們將會說到對象源碼行源碼行函數中，首先創建了一個，然后又創建了一個，它們兩者還是相互引用。感謝 yck: 剖析 React 源碼解析，本篇文章是在讀完他的文章的基礎上，將他的文章進行拆解和加工，加入我自己的一下理解和例子，便于大家理解。覺得yck寫的真的很棒。React 版本為 16.8.6，關于源碼的...

muddyway 2019-08-26 10:42 評論0 收藏0
React源碼解析之ReactDOM.render()

摘要：一更新的方式有三種渲染接下來，我們就來看下源碼二作用在提供的里渲染一個元素，并返回對該組件的引用常見的用法是這個官網網址源碼服務端使用方法渲染節點是讓服務端盡可能復用節點，提高性能元素容器應用渲染結束后，調用的函數錯誤抓取方法本質是返回 showImg(https://segmentfault.com/img/remote/1460000020064414?w=1240&h=641);...

iKcamp 2019-08-26 10:45 評論0 收藏0
剖析 React 源碼：render 流程（一）

摘要：大家可以看到是構造函數構造出來的，并且內部有一個對象，這個對象是本文接下來要重點介紹的對象，接下來我們就來一窺究竟吧。在構造函數內部就進行了一步操作，那就是創建了一個對象，并掛載到了上。下一篇文章還是流程相關的內容。這是我的剖析 React 源碼的第二篇文章，如果你沒有閱讀過之前的文章，請務必先閱讀一下第一篇文章中提到的一些注意事項，能幫助你更好地閱讀源碼。文章相關資料 React ...

hiYoHoo 2019-05-23 16:24 評論0 收藏0
ReactDom.render分析

摘要：先檢驗是否存在不存在則執行傳入，后的函數創建一個。方法更新執行方法，這個方法最終調用和并返回，這些進行調度算法和進行優先級判斷 1.步驟 1.創建ReactRoot 2.創建FiberRoot和FiberRoot 3.創建更新 2. render方法： render( element: React$Element, container: DOMContainer, ...

cjie 2019-08-23 16:43 評論0 收藏0
React源碼解析（一）

摘要：是整個應用的起點，包含應用掛載的目標節點，記錄整個應用更新過程的各種信息是一個對象是當前應用對應的對象，即。每個節點會對應一個對象，記錄節點的各種狀態，比如，，這些狀態更新完成后會被更新，是所對應節點的實際的實例，比如對應一個就是一個。 ReactDom.render做了什么首先react代碼分為react和react-dom兩個包，react中代碼量特別的少，基本就是API的定義，...

zzbo 2019-08-26 10:26 評論0 收藏0