摘要:什么是每一個都有一個對應的,記錄這個節點的各種狀態,是一鏈表的結構的串聯起來。
1. 什么是fiber
每一個ReactElement都有一個對應的fiber, 記錄這個節點的各種狀態, fiber是一鏈表的結構的串聯起來。
export type Fiber = {| // Tag identifying the type of fiber. //區分fiber的種類 tag: WorkTag, // Unique identifier of this child. // 像react元素中的唯一的key key: null | string, // The value of element.type which is used to preserve the identity during // reconciliation of this child. //就是creatElement的第一個值,用來在子節點reconciliation階段的標識 elementType: any, // The resolved function/class/ associated with this fiber. //異步組件加載resovled后種類是函數式還是類 type: any, // The local state associated with this fiber. //與這個fiber聯系的本地狀態,指向實例 stateNode: any, // It is conceptually the same as the return address of a stack frame. // 指向 Fiber Tree 中的父節點 return: Fiber | null, // Singly Linked List Tree Structure. // 指向第一個子節點 child: Fiber | null, // 指向兄弟節點 sibling: Fiber | null, index: number, // The ref last used to attach this node. // I"ll avoid adding an owner field for prod and model that as functions. ref: null | (((handle: mixed) => void) & {_stringRef: ?string}) | RefObject, // Input is the data coming into process this fiber. Arguments. Props. //新的即將進來的props pendingProps: any, // This type will be more specific once we overload the tag. // 現在的已經展示在UI上的props memoizedProps: any, // The props used to create the output. // A queue of state updates and callbacks. // 保存更新的狀態和回調函數 updateQueue: UpdateQueue| null, // The state used to create the output // 展示在UI中的state memoizedState: any, // A linked-list of contexts that this fiber depends on contextDependencies: ContextDependencyList | null, mode: TypeOfMode, // Effect //副作用 effectTag: SideEffectTag, // Singly linked list fast path to the next fiber with side-effects. // 單鏈表結構,方便遍歷 Fiber Tree 上有副作用的節點 nextEffect: Fiber | null, // The first and last fiber with side-effect within this subtree. This allows // us to reuse a slice of the linked list when we reuse the work done within // this fiber. //在子節點中的第一個和最后一個的副作用,這個可以允許我們進行切片的復用 firstEffect: Fiber | null, lastEffect: Fiber | null, // Represents a time in the future by which this work should be completed. // Does not include work found in its subtree. expirationTime: ExpirationTime, // This is used to quickly determine if a subtree has no pending changes. childExpirationTime: ExpirationTime, // This is a pooled version of a Fiber. Every fiber that gets updated will // eventually have a pair. There are cases when we can clean up pairs to save // memory if we need to. alternate: Fiber | null, // Time spent rendering this Fiber and its descendants for the current update. // This tells us how well the tree makes use of sCU for memoization. // It is reset to 0 each time we render and only updated when we don"t bailout. // This field is only set when the enableProfilerTimer flag is enabled. actualDuration?: number, // If the Fiber is currently active in the "render" phase, // This marks the time at which the work began. // This field is only set when the enableProfilerTimer flag is enabled. actualStartTime?: number, // Duration of the most recent render time for this Fiber. // This value is not updated when we bailout for memoization purposes. // This field is only set when the enableProfilerTimer flag is enabled. selfBaseDuration?: number, // Sum of base times for all descedents of this Fiber. // This value bubbles up during the "complete" phase. // This field is only set when the enableProfilerTimer flag is enabled. treeBaseDuration?: number, // Conceptual aliases // workInProgress : Fiber -> alternate The alternate used for reuse happens // to be the same as work in progress. // __DEV__ only _debugID?: number, _debugSource?: Source | null, _debugOwner?: Fiber | null, _debugIsCurrentlyTiming?: boolean, // Used to verify that the order of hooks does not change between renders. _debugHookTypes?: Array | null, |};
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103269.html
摘要:因為版本將真正廢棄這三生命周期到目前為止,的渲染機制遵循同步渲染首次渲染,更新時更新時卸載時期間每個周期函數各司其職,輸入輸出都是可預測,一路下來很順暢。通過進一步觀察可以發現,預廢棄的三個生命周期函數都發生在虛擬的構建期間,也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景 前段時間準備前端招聘事項...
摘要:淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗,提升用戶首屏體驗,提升用戶訪問速度,讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時,主要是通過進行通信。 最近項目慢慢走上正軌,需求趨于平穩,這才想起需要對整站進行性能優化。經過一段時間的學習,結合現在項目的實際性能情況,發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...
摘要:淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗,提升用戶首屏體驗,提升用戶訪問速度,讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時,主要是通過進行通信。 最近項目慢慢走上正軌,需求趨于平穩,這才想起需要對整站進行性能優化。經過一段時間的學習,結合現在項目的實際性能情況,發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...
摘要:杰出的數據庫遷移工具和緊密集成的單元測試支持,這些工具賦予你構建任何應用的能力。淺談應公司要求,現在用重新搭一個框架,接觸了幾天對它也有了一定的了解。淺談支持,支持單元測試。更加嚴謹了,異常嚴謹的錯誤檢測和安全機制。 自從接觸php開始,用的就是thinkphp框架,它給我的感覺是輕量,且容易上手。后來進了一家外包公司又用了laravel框架,個人覺得laravel還是很高大上的,功能...
摘要:淺談前端優化的幾個思路雪碧圖頁面中如果有很多圖片小圖標這樣會有很多請求一個圖就是一個請求建立連接進行三次握手這些都是耗費時間的如果頁面很多可以考慮用精靈汽水雪碧也是這個單詞技術做一張雪碧圖將請求多個變成一次請求可以用來配置實現懶加載如果頁面 淺談前端優化的幾個思路 https://ltoddy.github.io 雪碧圖 頁面中如果有很多圖片、icon(小圖標),這樣會有很多HTTP請...
閱讀 2830·2021-11-24 09:39
閱讀 4082·2021-10-27 14:19
閱讀 2042·2021-08-12 13:25
閱讀 2333·2019-08-29 17:07
閱讀 1112·2019-08-29 13:44
閱讀 1066·2019-08-26 12:17
閱讀 461·2019-08-23 17:16
閱讀 2048·2019-08-23 16:46