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

為沙坡頭等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及沙坡頭網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、沙坡頭網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

不同：1、15版本架構(gòu)分為協(xié)調(diào)器和渲染器兩部分，而16版本架構(gòu)分為調(diào)度器、協(xié)調(diào)器和渲染器三個(gè)部分；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)識(shí)出如何更新

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

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

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

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

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

說(shuō)在前頭：

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

對(duì)人眼來(lái)說(shuō)，正常流暢的刷新率為60hz，即60幀，即瀏覽器16.6ms刷新一次。

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

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

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

15和16區(qū)別

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

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

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

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

網(wǎng)站標(biāo)題：react15與16版本的區(qū)別是什么
當(dāng)前URL：http://www.chinadenli.net/article4/ieogie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、建站公司、App設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、云服務(wù)器、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)