性能優(yōu)化方案，搞定 React 的純組件！

嗨，我是你穩(wěn)定更新、干貨賊多的勾勾。

為了提升性能，減少渲染次數(shù)，React 有了純組件。只要 state 和 props 一致，就不用再次 render，結(jié)果保持一致。

shouldComponentUpdate

在 React 官方文檔中，生命周期函數(shù)中的 shouldComponentUpdate 有著特殊的意義。它的主要作用是：根據(jù) shouldComponentUpdate() 的返回值，判斷 React 組件的輸出是否受當(dāng)前 state 或 props 更改的影響。

就是說(shuō) shouldComponentUpdate 函數(shù)默認(rèn)返回 true ，任何 props 的更改，任何的 setState 的操作都會(huì)導(dǎo)致界面的重新 render，返過(guò)來(lái)返回 false ，這些操作就無(wú)法導(dǎo)致界面的 render，舉例如下：

//App.jsimport React from "react"class App extends React.Component {  constructor(props){    super(props)    this.state = {      name:"gougou"    }    this.onclick = this.onclick.bind(this)  }  onclick(){    this.setState({      name:"勾勾"    })  }  shouldComponentUpdate(nextProps, nextState){    return false;  }  render(){    return (      
        hello world        
this.onclick}>{this.state.name}      
    )  }

shouldComponentUpdate 函數(shù)里，我們強(qiáng)制修改了它的返回值為 false，結(jié)果我們?cè)邳c(diǎn)擊 p 標(biāo)簽的時(shí)候，是無(wú)法更改里面的內(nèi)容的。

在 React 中，這個(gè)方法的唯一用途就是性能優(yōu)化。也就是說(shuō)當(dāng) props 和 state 沒(méi)有發(fā)生改變的時(shí)候，我們不需要頁(yè)面重新 render。為滿足這一要求，我們就需要去搞清楚實(shí)現(xiàn) shouldComponentUpdate 的邏輯，對(duì)比新舊 props 和 state，但 React 不允許我們這樣做。React 自己提出了 PureComponent 純組件的概念。

PureComponent

PureComponent 是 React 的內(nèi)置組件，它會(huì)替代 shouldComponentUpdate 對(duì) props 和 state 進(jìn)行淺層比較。

淺層比較就是對(duì)引用地址的比較，主要分兩類。

• 基本數(shù)據(jù)類型，就是單純的值比較 ?1 == 1 ?true == true

• 引用類型，比如數(shù)組、對(duì)象就是地址的比較，如下例：

class App extends React.PureComponent {  constructor(props){    super(props)    this.state = {      name:["gougou"]    }    this.onclick = this.onclick.bind(this)  }  onclick(){    this.state.name[0] = '勾勾';    this.setState({      name:this.state.name    })  }  render(){    return (      
        hello world        
this.onclick}>{this.state.name}      
    )  }

上面這個(gè)案例的 name 是一個(gè)數(shù)組，再修改里面的第一個(gè)元素值為“勾勾”，但是這個(gè)引用地址還是之前的那個(gè)地址，所以當(dāng)我們點(diǎn)擊的時(shí)候，組件只是做了淺層對(duì)比，name 的引用地址是一樣的。雖然內(nèi)容不一樣，但不會(huì)導(dǎo)致界面發(fā)生 render。

當(dāng)我們了解了 Component 和 PureComponent 的基本情況后，就能盡量避免一些不必要的重復(fù)渲染。

推薦閱讀：

術(shù)與器：React 服務(wù)端渲染和靜態(tài)站點(diǎn)生成

手動(dòng)實(shí)現(xiàn)一個(gè)自己的 React 服務(wù)端渲染

給 React 穿上美麗的‘嫁衣’

尤雨溪 3 天 10 更的 Vite 究竟有什么魔力？

我對(duì) Webpack 5 真香了。

騰訊QQ偷我瀏覽記錄到底想干嘛。

點(diǎn)個(gè)“在看”和“贊”吧，

畢竟我是要成為前端網(wǎng)紅的人。