PureComponent

產(chǎn)生

由react的更新機(jī)制可知可知PureComponent的產(chǎn)生及其應(yīng)用場(chǎng)景。

  • diff算法運(yùn)行在哪個(gè)生命周期呢？
    在render之后，render返回的是virtual DOM。diff算法就是對(duì)virtual DOM進(jìn)行比較。從而以最優(yōu)策略更新DOM。
    我們剛才提到shouldComponentUpdate可以控制render函數(shù)是否調(diào)用，shouldComponentUpdate返回為false時(shí)不調(diào)用render。假如state和props并沒(méi)有改變，那么調(diào)用render，執(zhí)行diff運(yùn)算就毫無(wú)意義。我們可以在shouldComponentUpdate鉤子函數(shù)中比較state和props是否改變，如果沒(méi)有改變直接返回false，不進(jìn)行render調(diào)用。這時(shí)候react引入了PureComponent概念，他會(huì)在render之前對(duì)state和props進(jìn)行淺比較，若state和props都相同，則不會(huì)調(diào)用render。這個(gè)淺比較是在shouldComponentUpdate中進(jìn)行的，所以，使用PureComponent時(shí)不能在用shouldComponentUpdate鉤子函數(shù)了，因?yàn)闀?huì)覆蓋默認(rèn)的鉤子函數(shù)行為。

應(yīng)用場(chǎng)景

PureComponent 最佳情況是展示組件。如果更新次數(shù)頻繁的組件，使用 PureComponent 只會(huì)帶來(lái)大量的比較，降低了性能。

PureComponent VS Component

可閱讀React 的 PureComponent Vs Component。

注意事項(xiàng)

PureComponent不能使用shouldComponentUpdate周期，會(huì)報(bào)錯(cuò)。

PureComponent更新機(jī)制

閱讀React PureComponent 淺比較詳解可以詳情知道更新機(jī)制。

資料來(lái)源：
[1] 北極星__ react的更新機(jī)制可知
[2] huangpb0624 React PureComponent 淺比較詳解
[3] shuxiaotai React 的 PureComponent Vs Component

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容