react15與16版本的不同是什麼

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

本教學操作環境：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中文網其他相關文章！