react15與16版本的區別是什么

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

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

本教程操作環境：Windows10系統、react17.0.1版、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樹。

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