react15與16版本的區(qū)別是什么

這篇文章主要介紹“react15與16版本的區(qū)別是什么”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“react15與16版本的區(qū)別是什么”文章能幫助大家解決問題。

不同：1、15版本架構(gòu)分為協(xié)調(diào)器和渲染器兩部分，而16版本架構(gòu)分為調(diào)度器、協(xié)調(diào)器和渲染器三個部分；2、15版本的reconciler是采用遞歸形式工作是同步的，而16版本的reconciler采用的是異步可中斷更新代替15版本的同步更新。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react15與16版本的不同是什么

一.react15的架構(gòu)可以分為兩層：

Reconciler（協(xié)調(diào)器）— 找出需要更新的組件，以及標(biāo)識出如何更新

Renderer（渲染器）— 負(fù)責(zé)將變化后的組件渲染到頁面上

二.react16的架構(gòu)可以分為三層：

Scheduler（調(diào)度器）— 調(diào)度任務(wù)的優(yōu)先級，高級優(yōu)先級的優(yōu)先進(jìn)入Reconciler階段

Reconciler（協(xié)調(diào)器）— 找出需要更新的組件，以及標(biāo)識出如何更新

Renderer（渲染器）— 負(fù)責(zé)將變化后的組件渲染到頁面上

說在前頭：

瀏覽器的16.6ms機(jī)制

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

我們知道js可以操作dom元素，所以瀏覽器的GUI線程和js線程是互斥的。js的執(zhí)行和瀏覽器的繪制、布局不能同時進(jìn)行。所以在每16.6ms內(nèi)瀏覽器要執(zhí)行如下操作：

JS腳本執(zhí)行 ------ 瀏覽器樣式布局 ------ 瀏覽器樣式繪制

如果js腳本執(zhí)行時間過長，超過16.6ms，這次刷新中瀏覽器繪制和布局就無法執(zhí)行，這就會造成人眼可識別的卡頓，發(fā)現(xiàn)操作時瀏覽器沒有“實(shí)時”做出反應(yīng)。如：對于用戶在輸入框輸入內(nèi)容這個行為來說，就體現(xiàn)為按下了鍵盤按鍵但是頁面上不實(shí)時顯示輸入。

15和16區(qū)別

react15的reconciler是stack-reconciler。即是采用遞歸形式工作的，是同步的，在生成虛擬dom樹并diff過程中是無法中斷的。這樣在組件層級過深時，會造成js執(zhí)行時間過長，瀏覽器無法布局和繪制，造成丟幀。

react16的reconciler是fiber-reconciler。即采用的異步可中斷更新代替react15的同步更新，react16的scheduler調(diào)度器會告訴reconciler，瀏覽器是否有空閑時間執(zhí)行js腳本。這樣就不會影響瀏覽器的繪制和布局工作。不會丟幀。

在react16中，原來的虛擬DOM,因其結(jié)構(gòu)已不能滿足異步可中斷更新的需求，改而采用新的結(jié)構(gòu)Fiber。虛擬dom節(jié)對應(yīng)變?yōu)镕iber節(jié)點(diǎn)，虛擬dom樹對應(yīng)變?yōu)镕iber樹。

關(guān)于“react15與16版本的區(qū)別是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。