国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React Fiber 原理介紹

leap_frog / 2542人閱讀

摘要:如果運(yùn)算持續(xù)占用主線程,頁面就沒法得到及時(shí)的更新。三解題思路解決主線程長時(shí)間被運(yùn)算占用這一問題的基本思路,是將運(yùn)算切割為多個(gè)步驟,分批完成。這顆新樹每生成一個(gè)新的節(jié)點(diǎn),都會(huì)將控制權(quán)交回給主線程,去檢查有沒有優(yōu)先級(jí)更高的任務(wù)需要執(zhí)行。

歡迎關(guān)注我的公眾號(hào)睿Talk,獲取我最新的文章:

一、前言

在 React Fiber 架構(gòu)面世一年多后,最近 React 又發(fā)布了最新版 16.8.0,又一激動(dòng)人心的特性:React Hooks 正式上線,讓我升級(jí) React 的意愿越來越強(qiáng)烈了。在升級(jí)之前,不妨回到原點(diǎn),了解下人才濟(jì)濟(jì)的 React 團(tuán)隊(duì)為什么要大費(fèi)周章,重寫 React 架構(gòu),而 Fiber 又是個(gè)什么概念。

二、React 15 的問題

在頁面元素很多,且需要頻繁刷新的場(chǎng)景下,React 15 會(huì)出現(xiàn)掉幀的現(xiàn)象。請(qǐng)看以下例子:
https://claudiopro.github.io/...

其根本原因,是大量的同步計(jì)算任務(wù)阻塞了瀏覽器的 UI 渲染。默認(rèn)情況下,JS 運(yùn)算、頁面布局和頁面繪制都是運(yùn)行在瀏覽器的主線程當(dāng)中,他們之間是互斥的關(guān)系。如果 JS 運(yùn)算持續(xù)占用主線程,頁面就沒法得到及時(shí)的更新。當(dāng)我們調(diào)用setState更新頁面的時(shí)候,React 會(huì)遍歷應(yīng)用的所有節(jié)點(diǎn),計(jì)算出差異,然后再更新 UI。整個(gè)過程是一氣呵成,不能被打斷的。如果頁面元素很多,整個(gè)過程占用的時(shí)機(jī)就可能超過 16 毫秒,就容易出現(xiàn)掉幀的現(xiàn)象。

針對(duì)這一問題,React 團(tuán)隊(duì)從框架層面對(duì) web 頁面的運(yùn)行機(jī)制做了優(yōu)化,得到很好的效果。

三、解題思路

解決主線程長時(shí)間被 JS 運(yùn)算占用這一問題的基本思路,是將運(yùn)算切割為多個(gè)步驟,分批完成。也就是說在完成一部分任務(wù)之后,將控制權(quán)交回給瀏覽器,讓瀏覽器有時(shí)間進(jìn)行頁面的渲染。等瀏覽器忙完之后,再繼續(xù)之前未完成的任務(wù)。

舊版 React 通過遞歸的方式進(jìn)行渲染,使用的是 JS 引擎自身的函數(shù)調(diào)用棧,它會(huì)一直執(zhí)行到棧空為止。而Fiber實(shí)現(xiàn)了自己的組件調(diào)用棧,它以鏈表的形式遍歷組件樹,可以靈活的暫停、繼續(xù)和丟棄執(zhí)行的任務(wù)。實(shí)現(xiàn)方式是使用了瀏覽器的requestIdleCallback這一 API。官方的解釋是這樣的:

window.requestIdleCallback()會(huì)在瀏覽器空閑時(shí)期依次調(diào)用函數(shù),這就可以讓開發(fā)者在主事件循環(huán)中執(zhí)行后臺(tái)或低優(yōu)先級(jí)的任務(wù),而且不會(huì)對(duì)像動(dòng)畫和用戶交互這些延遲觸發(fā)但關(guān)鍵的事件產(chǎn)生影響。函數(shù)一般會(huì)按先進(jìn)先調(diào)用的順序執(zhí)行,除非函數(shù)在瀏覽器調(diào)用它之前就到了它的超時(shí)時(shí)間。

有了解題思路后,我們?cè)賮砜纯?React 具體是怎么做的。

四、React 的答卷

React 框架內(nèi)部的運(yùn)作可以分為 3 層:

Virtual DOM 層,描述頁面長什么樣。

Reconciler 層,負(fù)責(zé)調(diào)用組件生命周期方法,進(jìn)行 Diff 運(yùn)算等。

Renderer 層,根據(jù)不同的平臺(tái),渲染出相應(yīng)的頁面,比較常見的是 ReactDOM 和 ReactNative。

這次改動(dòng)最大的當(dāng)屬 Reconciler 層了,React 團(tuán)隊(duì)也給它起了個(gè)新的名字,叫Fiber Reconciler。這就引入另一個(gè)關(guān)鍵詞:Fiber。

Fiber 其實(shí)指的是一種數(shù)據(jù)結(jié)構(gòu),它可以用一個(gè)純 JS 對(duì)象來表示:

const fiber = {
    stateNode,    // 節(jié)點(diǎn)實(shí)例
    child,        // 子節(jié)點(diǎn)
    sibling,      // 兄弟節(jié)點(diǎn)
    return,       // 父節(jié)點(diǎn)
}

為了加以區(qū)分,以前的 Reconciler 被命名為Stack Reconciler。Stack Reconciler 運(yùn)作的過程是不能被打斷的,必須一條道走到黑:

而 Fiber Reconciler 每執(zhí)行一段時(shí)間,都會(huì)將控制權(quán)交回給瀏覽器,可以分段執(zhí)行:

為了達(dá)到這種效果,就需要有一個(gè)調(diào)度器 (Scheduler) 來進(jìn)行任務(wù)分配。任務(wù)的優(yōu)先級(jí)有六種:

synchronous,與之前的Stack Reconciler操作一樣,同步執(zhí)行

task,在next tick之前執(zhí)行

animation,下一幀之前執(zhí)行

high,在不久的將來立即執(zhí)行

low,稍微延遲執(zhí)行也沒關(guān)系

offscreen,下一次render時(shí)或scroll時(shí)才執(zhí)行

優(yōu)先級(jí)高的任務(wù)(如鍵盤輸入)可以打斷優(yōu)先級(jí)低的任務(wù)(如Diff)的執(zhí)行,從而更快的生效。

Fiber Reconciler 在執(zhí)行過程中,會(huì)分為 2 個(gè)階段。

階段一,生成 Fiber 樹,得出需要更新的節(jié)點(diǎn)信息。這一步是一個(gè)漸進(jìn)的過程,可以被打斷。

階段二,將需要更新的節(jié)點(diǎn)一次過批量更新,這個(gè)過程不能被打斷。

階段一可被打斷的特性,讓優(yōu)先級(jí)更高的任務(wù)先執(zhí)行,從框架層面大大降低了頁面掉幀的概率。

五、Fiber 樹

Fiber Reconciler 在階段一進(jìn)行 Diff 計(jì)算的時(shí)候,會(huì)生成一棵 Fiber 樹。這棵樹是在 Virtual DOM 樹的基礎(chǔ)上增加額外的信息來生成的,它本質(zhì)來說是一個(gè)鏈表。

Fiber 樹在首次渲染的時(shí)候會(huì)一次過生成。在后續(xù)需要 Diff 的時(shí)候,會(huì)根據(jù)已有樹和最新 Virtual DOM 的信息,生成一棵新的樹。這顆新樹每生成一個(gè)新的節(jié)點(diǎn),都會(huì)將控制權(quán)交回給主線程,去檢查有沒有優(yōu)先級(jí)更高的任務(wù)需要執(zhí)行。如果沒有,則繼續(xù)構(gòu)建樹的過程:

如果過程中有優(yōu)先級(jí)更高的任務(wù)需要進(jìn)行,則 Fiber Reconciler 會(huì)丟棄正在生成的樹,在空閑的時(shí)候再重新執(zhí)行一遍。

在構(gòu)造 Fiber 樹的過程中,F(xiàn)iber Reconciler 會(huì)將需要更新的節(jié)點(diǎn)信息保存在Effect List當(dāng)中,在階段二執(zhí)行的時(shí)候,會(huì)批量更新相應(yīng)的節(jié)點(diǎn)。

六、總結(jié)

本文從 React 15 存在的問題出發(fā),介紹 React Fiber 解決問題的思路,并介紹了 Fiber Reconciler 的工作流程。從Stack ReconcilerFiber Reconciler,源碼層面其實(shí)就是干了一件遞歸改循環(huán)的事情,日后有機(jī)會(huì)的話,我再結(jié)合源碼作進(jìn)一步的介紹。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/101991.html

相關(guān)文章

  • React系列——React Fiber 架構(gòu)介紹資料匯總(翻譯+中文資料)

    摘要:它的主體特征是增量渲染能夠?qū)秩竟ぷ鞣指畛蓧K,并將其分散到多個(gè)幀中。實(shí)際上,這樣做可能會(huì)造成浪費(fèi),導(dǎo)致幀丟失并降低用戶體驗(yàn)。當(dāng)一個(gè)函數(shù)被執(zhí)行時(shí),一個(gè)新的堆棧框架被添加到堆棧中。該堆棧框表示由該函數(shù)執(zhí)行的工作。 原文 react-fiber-architecture 介紹 React Fibre是React核心算法正在進(jìn)行的重新實(shí)現(xiàn)。它是React團(tuán)隊(duì)兩年多的研究成果。 React ...

    taohonghui 評(píng)論0 收藏0
  • React Fiber 漸進(jìn)式遍歷詳解

    摘要:今天將手寫一個(gè),詳細(xì)講解遍歷鏈的實(shí)現(xiàn)方式。可以看到循環(huán)的結(jié)束條件是當(dāng)前處理的節(jié)點(diǎn)等于根節(jié)點(diǎn)。下面再來看看怎么結(jié)合,實(shí)現(xiàn)漸進(jìn)式遍歷。 歡迎關(guān)注我的公眾號(hào)睿Talk,獲取我最新的文章:showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 之前寫的一篇文章,React Fiber 原理介紹,介紹了 React Fiber 的實(shí)現(xiàn)原理,其中的關(guān)...

    GraphQuery 評(píng)論0 收藏0
  • 淺談React Fiber

    摘要:因?yàn)榘姹緦⒄嬲龔U棄這三生命周期到目前為止,的渲染機(jī)制遵循同步渲染首次渲染,更新時(shí)更新時(shí)卸載時(shí)期間每個(gè)周期函數(shù)各司其職,輸入輸出都是可預(yù)測(cè),一路下來很順暢。通過進(jìn)一步觀察可以發(fā)現(xiàn),預(yù)廢棄的三個(gè)生命周期函數(shù)都發(fā)生在虛擬的構(gòu)建期間,也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景 前段時(shí)間準(zhǔn)備前端招聘事項(xiàng)...

    izhuhaodev 評(píng)論0 收藏0
  • React16性能改善的原理(二)

    摘要:接下來我們就是正式的工作了,用循環(huán)從某個(gè)節(jié)點(diǎn)開始遍歷樹。最后一步判斷全局變量是否存在,如果存在則把這次遍歷樹產(chǎn)生的所有更新一次更新到真實(shí)的上去。 前情提要 上一篇我們提到如果 setState 之后,虛擬 dom diff 比較耗時(shí),那么導(dǎo)致瀏覽器 FPS 降低,使得用戶覺得頁面卡頓。那么 react 新的調(diào)度算法就是把原本一次 diff 的過程切分到各個(gè)幀去執(zhí)行,使得瀏覽器在 dif...

    guqiu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<