目錄

1??組件更新機(jī)制

2??虛擬DOM配合Diff算法

3??減輕state

4??shouldComponentUpdate()

4.1??基本使用

4.2??使用參數(shù)

5??純組件

5.1??基本使用

5.2??純組件的比較方法 shallow compere

---

1??組件更新機(jī)制

當(dāng)父組件重新渲染時(shí)，父組件的所有子組件也會(huì)重新渲染，但非父組件的所有子組件不會(huì)重新渲染

如果只有parent2更新了，那么只會(huì)更新 child2-1與child2-2及后代，別的都不更新

如果是根組件更新，那么就所有組件都會(huì)更新

2??虛擬DOM配合Diff算法

當(dāng)組件中只有一個(gè)DOM元素需要更新時(shí)，React使用 虛擬DOM配合Diff算法 只對(duì)需要更新的部分更新

虛擬DOM本質(zhì)上是一個(gè)JS對(duì)象，用來(lái)描述你希望再屏幕上看到的內(nèi)容

• 由于只是一個(gè)JS對(duì)象，所以有JS環(huán)境就可以描述DOM了，這個(gè)特性拜托了瀏覽器的束縛，更好的實(shí)現(xiàn)React跨平臺(tái)的功能

渲染DOM的流程是這樣的，首先根據(jù)一些數(shù)據(jù)生成虛擬DOM，然后根據(jù)虛擬DOM生成頁(yè)面上的DOM

當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候，生成一個(gè)新的虛擬DOM，Diff算法比較新的虛擬DOM與舊的虛擬DOM的區(qū)別，然后只重新渲染有改動(dòng)的真實(shí)的DOM

• 色表示改變的部分

3??減輕state

state應(yīng)只存儲(chǔ)何組件渲染有關(guān)的數(shù)據(jù)。

像定時(shí)器的id這種也需要在多個(gè)方法中用到的數(shù)據(jù)，應(yīng)該放在this中

4??shouldComponentUpdate()

當(dāng)父組件更新后，父組件的所有后代組件都會(huì)被更新，可以使用鉤子函數(shù) shouldComponentUpdate(nextProps,nextState) 來(lái)避免不必要的重新渲染

shouldComponentUpdate()可以接收nextProps與nextState兩個(gè)參數(shù)，我們可以通過(guò)這兩個(gè)參數(shù)對(duì)是否需要渲染進(jìn)行判斷，如果我們定義返回值為true表示需要重新渲染組件，false表示不需要重新渲染

shouldComponentUpdate()是在更新的時(shí)候觸發(fā)，不會(huì)說(shuō)這里給了false所以開(kāi)始的時(shí)候渲染不出來(lái)

4.1??基本使用

我們做個(gè)計(jì)數(shù)器的例子，子組件負(fù)責(zé)顯示文本

點(diǎn)擊按鈕后可以正常計(jì)數(shù)

現(xiàn)在我們?cè)谧咏M件中加入 shouldComponentUpdate()，并讓其返回值為false

這個(gè)時(shí)候點(diǎn)按鈕就沒(méi)用了，因?yàn)榉祷刂祵?xiě)死為false，所以就不會(huì)再更新了

4.2??使用參數(shù)

nextProps是最新的props，nextState是最新的state，我們簡(jiǎn)單用一下

點(diǎn)擊按鈕之后可以獲取到最新的props與state

可以通過(guò)this.state與this.props獲取更新前的狀態(tài)

我們通過(guò)更新前與更新后的狀態(tài)就可以判斷此組件是否需要更新了

5??純組件

5.1??基本使用

純組件(React.PureComponent)與React.Component功能類(lèi)似

之前我們創(chuàng)建組件的時(shí)候都是繼承的React.Componnent

純組件內(nèi)部自動(dòng)通過(guò)shallow compere(淺層對(duì)比)比較 更新前后的props與state ，如果有變化就渲染，如果沒(méi)用變化就不渲染

我們簡(jiǎn)單做個(gè)例子，先看React.Component，目前點(diǎn)擊按鈕后count不再+1，而是保持原狀

點(diǎn)擊按鈕后會(huì)執(zhí)行render()

之后再看純組件

由于count沒(méi)有發(fā)生改變，所以只執(zhí)行了一開(kāi)始渲染頁(yè)面的render()，后面點(diǎn)擊按鈕不再執(zhí)行render()

5.2??純組件的比較方法 shallow compere

值(整形，字符串這種)的話就是直接比，對(duì)于引用類(lèi)型(數(shù)組，對(duì)象)只比較引用地址是否相同

在純組件中使用淺拷貝會(huì)出問(wèn)題

先回憶一下JS的淺拷貝

純組件中的原理與上面一樣，純組件判定這一次對(duì)象與上一次對(duì)象相同，就不會(huì)再渲染了

?

如果要修改類(lèi)型為對(duì)象的狀態(tài)，建議使用深拷貝(三個(gè)點(diǎn)的方式)

無(wú)論是純組件還是普通組件都建議新搞一個(gè)數(shù)據(jù)