首頁 > web前端 > 前端問答 > react15與16版本的不同是什麼

react15與16版本的不同是什麼

WBOY
發布: 2022-06-08 16:42:42
原創
3028 人瀏覽過

不同:1、15版本架構分為協調器和渲染器兩部分,而16版本架構分為調度器、協調器和渲染器三個部分;2、15版本的reconciler是採用遞歸形式工作是同步的,而16版本的reconciler採用的是異步可中斷更新取代15版本的同步更新。

react15與16版本的不同是什麼

本教學操作環境:Windows10系統、react16&&react15版、Dell G3電腦。

react15與16版本的不同是什麼

一.react15的架構可以分為兩層:

Reconciler (協調器)— 找出需要更新的元件,以及標識如何更新

Renderer(渲染器)— 負責將變更後的元件渲染到頁面上

二. react16的架構可以分為三層:

Scheduler(調度器)— 調度任務的優先權,高階優先權的優先進入Reconciler階段

Reconciler(協調器)—找出需要更新的元件,以及標識如何更新

Renderer(渲染器)— 負責將變更後的元件渲染到頁面上

說在前頭:

瀏覽器的16.6ms機制

對人眼來說,正常流暢的更新率為60hz,即60幀,即瀏覽器16.6ms刷新一次。

我們知道js可以操作dom元素,所以瀏覽器的GUI執行緒和js執行緒是互斥的。 js的執行和瀏覽器的繪製、佈局不能同時進行。所以在每16.6ms內瀏覽器要執行以下操作:

JS腳本執行------ 瀏覽器樣式佈局------ 瀏覽器樣式繪製

如果js腳本執行時間過長,超過16.6ms,這次刷新中瀏覽器繪製和佈局就無法執行,這就會造成人眼可識別的卡頓,發現操作時瀏覽器沒有「即時」做出反應。如:對於使用者在輸入框輸入內容這個行為來說,就體現為按下了鍵盤按鍵但是頁面上不即時顯示輸入。

15和16區別

react15的reconciler是stack-reconciler。即是採用遞歸形式工作的,是同步的,在生成虛擬dom樹並diff過程中是無法中斷的。這樣在元件層級過深時,會造成js執行時間過長,瀏覽器無法佈局和繪製,造成丟幀。

react16的reconciler是fiber-reconciler。即採用的非同步可中斷更新取代react15的同步更新,react16的scheduler調度器會告訴reconciler,瀏覽器是否有空閒時間執行js腳本。這樣就不會影響瀏覽器的繪製和佈局工作。不會丟幀。

在react16中,原來的虛擬DOM,因其結構已無法滿足異步可中斷更新的需求,改而採用新的結構Fiber。虛擬dom節對應變成Fiber節點,虛擬dom樹對應變成Fiber樹。

推薦學習:《react影片教學

以上是react15與16版本的不同是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板