組件的重新渲染

創(chuàng)新互聯(lián)擁有網(wǎng)站維護(hù)技術(shù)和項(xiàng)目管理團(tuán)隊(duì)，建立的售前、實(shí)施和售后服務(wù)體系，為客戶提供定制化的網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、大邑服務(wù)器托管解決方案。為客戶網(wǎng)站安全和日常運(yùn)維提供整體管家式外包優(yōu)質(zhì)服務(wù)。我們的網(wǎng)站維護(hù)服務(wù)覆蓋集團(tuán)企業(yè)、上市公司、外企網(wǎng)站、成都做商城網(wǎng)站、政府網(wǎng)站等各類型客戶群體，為全球上1000+企業(yè)提供全方位網(wǎng)站維護(hù)、服務(wù)器維護(hù)解決方案。

我們可以在 React 組件中的 props 和 state 存放任何類型的數(shù)據(jù)，通過(guò)改變 props 和 state，去控制整個(gè)組件的狀態(tài)。當(dāng) props 和 state 發(fā)生變化時(shí)，React 會(huì)重新渲染整個(gè)組件，組件重新渲染的過(guò)程可簡(jiǎn)化如下圖：

譯者之前對(duì)diff的理解是，對(duì)于一個(gè)改變 props 的組件，diff能自動(dòng)計(jì)算出組件內(nèi)部DOM樹(shù)的不同，然后經(jīng)過(guò)對(duì)比，找出真正變化的DOM節(jié)點(diǎn)，對(duì)變化部分進(jìn)行渲染。這個(gè)是錯(cuò)誤的理解，diff算法只是用來(lái)計(jì)算出改變狀態(tài)或 props的組件/虛擬節(jié)點(diǎn)，而這個(gè)組件/虛擬節(jié)點(diǎn)，無(wú)論多大，它都會(huì)重新渲染。

假設(shè)有一個(gè)渲染完成的組件，如下圖：

接下來(lái)因?yàn)闋顟B(tài)改變，需要重新渲染下圖的綠色的節(jié)點(diǎn)，如下圖：

一般的想法是只需要更新下面的三個(gè)綠色節(jié)點(diǎn)就能夠完成組件的更新

然而！只要組件的 props 或 state 發(fā)生了變化就會(huì)重新渲染整個(gè)組件，因此除了上述的三個(gè)綠色節(jié)點(diǎn)以外，還需要重新渲染所有的黃色的節(jié)點(diǎn)

除了必要渲染的三個(gè)節(jié)點(diǎn)外，還渲染了其他不必要渲染的節(jié)點(diǎn)，這對(duì)性能是一個(gè)很大的浪費(fèi)。如果對(duì)于復(fù)雜的頁(yè)面，這將導(dǎo)致頁(yè)面的整體體驗(yàn)效果非常差。因此要提高組件的性能，就應(yīng)該想盡一切方法減少不必要的渲染。

shouldComponentUpdate

shouldComponentUpdate這個(gè)函數(shù)會(huì)在組件重新渲染之前調(diào)用，函數(shù)的返回值確定了組件是否需要重新渲染。函數(shù)默認(rèn)的返回值是 true，意思就是只要組件的 props 或者 state 發(fā)生了變化，就會(huì)重新構(gòu)建 virtual DOM，然后使用 diff 算法進(jìn)行比較，再接著根據(jù)比較結(jié)果決定是否重新渲染整個(gè)組件。函數(shù)的返回值為 false 表示不需要重新渲染。

函數(shù)默認(rèn)返回為 true.

PureRenderMixin

React 官方提供了 PureRenderMixin 插件，插件的功能就是在不必要的情況下讓函數(shù) shouldComponentUpdate 返回 false, 使用這個(gè)插件就能夠減少不必要的重新渲染，得到一定程度上的性能提升，其使用方法如下：

  import PureRenderMixin from 'react-addons-pure-render-mixin';
  class FooComponent extends React.Component {
   constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
   }

   render() {
    return <div className={this.props.className}>foo</div>;
   }
  }

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：React如何避免重渲染-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://aaarwkj.com/article48/ggihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(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)