国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React 渲染機(jī)制解析

荊兆峰 / 1252人閱讀

摘要：渲染過程我們都知道使用可以使得網(wǎng)頁的性能有很大的提高，本文具體探究它是通過什么樣的渲染機(jī)制做到的。也就是說如果父節(jié)點(diǎn)不同，將不會在去對比子節(jié)點(diǎn)。

React渲染過程

我們都知道使用React可以使得網(wǎng)頁的性能有很大的提高，本文具體探究它是通過什么樣的渲染機(jī)制做到的。

在頁面一開始打開的時候，React會調(diào)用render函數(shù)構(gòu)建一棵Dom樹，在state/props發(fā)生改變的時候，render函數(shù)會被再次調(diào)用渲染出另外一棵樹，接著，React會用對兩棵樹進(jìn)行對比，找到需要更新的地方批量改動。

Diff 算法

這個過程中，比較兩棵Dom tree高效找出需要更新的地方是很重要的。React基于兩個假設(shè)：

兩個相同的組件產(chǎn)生類似的DOM結(jié)構(gòu)，不同組件產(chǎn)生不同DOM結(jié)構(gòu)

對于同一層次的一組子節(jié)點(diǎn)，它們可以通過唯一的id區(qū)分

發(fā)明了一種叫Diff的算法，它極大的優(yōu)化了這個比較的過程，將算法復(fù)雜度從O(n^3)降低到O(n)。

同時，基于第一點(diǎn)假設(shè)，我們可以推論出，Diff算法只會對同層的節(jié)點(diǎn)進(jìn)行比較。如圖，它只會對顏色相同的節(jié)點(diǎn)進(jìn)行比較。

也就是說如果父節(jié)點(diǎn)不同，React將不會在去對比子節(jié)點(diǎn)。因?yàn)椴煌慕M件DOM結(jié)構(gòu)會不相同，所以就沒有必要在去對比子節(jié)點(diǎn)了。這也提高了對比的效率。

下面，我們具體看下Diff算法是怎么做的，這里分為兩種情況考慮

節(jié)點(diǎn)類型不同

節(jié)點(diǎn)類型相同，但是屬性不同

不同節(jié)點(diǎn)類型

對于不同的節(jié)點(diǎn)類型，react會基于第一條假設(shè)，直接刪去舊的節(jié)點(diǎn)，新建一個新的節(jié)點(diǎn)。

比如：


  

// 由shape1到shape2

React會直接刪掉A節(jié)點(diǎn)（包括它所有的子節(jié)點(diǎn)）,然后新建一個B節(jié)點(diǎn)插入。

為了驗(yàn)證這一點(diǎn)，我打印出了從shape1到shape2節(jié)點(diǎn)的生命周期，gitbub鏈接：
https://github.com/hhhuangqio...

感興趣的可以自己跑一跑代碼~

Shape1 :
A is created 
A render
C is created
C render
C componentDidMount
A componentDidMount

Shape2 :
A componentWillUnmount
C componentWillUnmount
B is created
B render
C is created
C render
C componentDidMount
B componentDidMount

由此可以看出，A與其子節(jié)點(diǎn)C會被直接刪除，然后重新建一個B，C插入。

相同節(jié)點(diǎn)類型

當(dāng)對比相同的節(jié)點(diǎn)類型比較簡單，react會對比它們的屬性，只改變需要改變的屬性

比如：

這兩個div中，react會只更新className的值

這兩個div中，react只會去更新color的值

列表比較 

// 列表一到列表二

從列表一到列表二，只是在中間插入了一個C，但是如果沒有key的時候，react會把B刪去，新建一個C放在B的位置，然后重新建一個節(jié)點(diǎn)B放在尾部。

你說什么就是什么咯？！不信的話，我們還是跑一邊代碼，看看生命周期驗(yàn)證一下

列表一：
A is created
A render
B is created
B render
A componentDidMount
B componentDidMount

列表二：
A render
B componentWillUnmount
C is created
C render
B is created
B render
A componentDidUpdate
C componentDidMount
B componentDidMount

當(dāng)節(jié)點(diǎn)很多的時候，這樣做是非常低效的，所以我們需要給每個節(jié)點(diǎn)配一個key，讓react可以識別出來哪些節(jié)點(diǎn)是一樣的，不需要重新創(chuàng)建。
配上key之后，在跑一遍代碼看看，

A render
C is created
C render
B render
A componentDidUpdate
C componentDidMount
B componentDidUpdate

果然，配上key之后，列表二的生命周期就如我所愿，只在指定的位置創(chuàng)建C節(jié)點(diǎn)插入。
這里要注意的一點(diǎn)是，key值必須是穩(wěn)定（所以我們不能用Math.random()去創(chuàng)建key），可預(yù)測，并且唯一的。

小結(jié)

React整個的渲染機(jī)制就是在state/props發(fā)生改變的時候，重新渲染所有的節(jié)點(diǎn)，構(gòu)造出新的虛擬Dom tree跟原來的Dom tree用Diff算法進(jìn)行比較，得到需要更新的地方在批量造作在真實(shí)的Dom上，由于這樣做就減少了對Dom的頻繁操作，從而提升的性能。

探索性能優(yōu)化

但是，是不是真的需要對所有的節(jié)點(diǎn)都重新渲染一遍呢？
下一篇文章，我們將繼續(xù)探討這個問題~

參考文檔：

http://www.infoq.com/cn/artic...

https://facebook.github.io/re...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84678.html

相關(guān)文章

  • 淺談React Fiber

    摘要：因?yàn)榘姹緦⒄嬲龔U棄這三生命周期到目前為止，的渲染機(jī)制遵循同步渲染首次渲染，更新時更新時卸載時期間每個周期函數(shù)各司其職，輸入輸出都是可預(yù)測，一路下來很順暢。通過進(jìn)一步觀察可以發(fā)現(xiàn)，預(yù)廢棄的三個生命周期函數(shù)都發(fā)生在虛擬的構(gòu)建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景 前段時間準(zhǔn)備前端招聘事項(xiàng)...

    izhuhaodev 評論0 收藏0

  • Record 前端開發(fā)知識整理分享

    showImg(https://segmentfault.com/img/remote/1460000018716142?w=200&h=200); showImg(https://segmentfault.com/img/remote/1460000018716143);showImg(https://segmentfault.com/img/remote/1460000010953710);...

    TZLLOG 評論0 收藏0

  • 初級前端開發(fā)面試總結(jié)

    摘要：前端面試總結(jié)先說背景，本人年月畢業(yè)，去年十月校招到今年月一直在做前端開發(fā)工作，年前打算換工作，就重新梳理下面試考點(diǎn)總結(jié)包含基礎(chǔ)，基礎(chǔ)，常見算法和數(shù)據(jù)結(jié)構(gòu)，框架，計(jì)算機(jī)網(wǎng)絡(luò)相關(guān)知識，可能有的點(diǎn)很細(xì)，有的點(diǎn)很大，參考個人情況進(jìn)行總結(jié)，方便對知識 前端面試總結(jié) 先說背景，本人2018年7月畢業(yè)，去年十月校招到今年10月一直在做前端開發(fā)工作，年前打算換工作，就重新梳理下面試考點(diǎn)總結(jié)包含： ...

    jifei 評論0 收藏0

  • 初級前端開發(fā)面試總結(jié)

    摘要：前端面試總結(jié)先說背景，本人年月畢業(yè)，去年十月校招到今年月一直在做前端開發(fā)工作，年前打算換工作，就重新梳理下面試考點(diǎn)總結(jié)包含基礎(chǔ)，基礎(chǔ)，常見算法和數(shù)據(jù)結(jié)構(gòu)，框架，計(jì)算機(jī)網(wǎng)絡(luò)相關(guān)知識，可能有的點(diǎn)很細(xì)，有的點(diǎn)很大，參考個人情況進(jìn)行總結(jié)，方便對知識 前端面試總結(jié) 先說背景，本人2018年7月畢業(yè)，去年十月校招到今年10月一直在做前端開發(fā)工作，年前打算換工作，就重新梳理下面試考點(diǎn)總結(jié)包含： ...

    tigerZH 評論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動 歡迎來我的個人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    dailybird 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<