組件的重新渲染

我們可以在 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樹的不同，然后經(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>;
   }
  }

我們需要在組件中重寫 shouldComponentUpdate，PureRenderMixin源碼中對(duì)PureRenderMixin.shouldComponentUpdate的定義是這樣

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

重寫的方法里面根據(jù)組件的目前的狀態(tài)和組件接下來(lái)的狀態(tài)進(jìn)行淺比較，如果組件的狀態(tài)發(fā)生變化則返回結(jié)果為 false，狀態(tài)沒(méi)有發(fā)生變化則返回結(jié)果為 true

  shouldComponentUpdate(nextProps, nextState) {
    return !shallowEqual(this.props, nextProps) ||
        !shallowEqual(this.state, nextState);
  }

在 React 的最新版本里面，提供了 React.PureComponent 的基礎(chǔ)類，而不需要使用這個(gè)插件。

譯者注：所以在一個(gè)較大的組件決定重渲染的時(shí)候，我們可以在每一個(gè)子組件中綁定新的shouldComponentUpdate方法，這樣可以減少子組件重新渲染的次數(shù)。

我們自己可以重寫 shouldComponentUpdate 這個(gè)函數(shù)，使得其能夠?qū)θ魏问挛镞M(jìn)行比較，也就是深比較（通過(guò)一層一層的遞歸進(jìn)行比較），深比較是很耗時(shí)的，一般不推薦這么干，因?yàn)橐ＷC比較所花的時(shí)間少于重新渲染的整個(gè)組件所花的時(shí)間，同時(shí)為了減少比較所花的時(shí)間我們應(yīng)該保證 props 和 state 盡量簡(jiǎn)單，不要把不必要的屬性放入 state，能夠由其他屬性計(jì)算出來(lái)的屬性也不要放入 state 中。

Immutable.js

對(duì)于復(fù)雜的數(shù)據(jù)的比較是非常耗時(shí)的，而且可能無(wú)法比較，通過(guò)使用 Immutable.js 能夠很好地解決這個(gè)問(wèn)題，Immutable.js 的基本原則是對(duì)于不變的對(duì)象返回相同的引用，而對(duì)于變化的對(duì)象，返回新的引用。因此對(duì)于狀態(tài)的比較只需要使用如下代碼即可：

  shouldComponentUpdate() {
    return ref1 !== ref2;
  }

同樣需要我們?cè)谧咏M件中將shouldComponentUpdate方法重寫。

Pure Component

如果一個(gè)組件只和 props 和 state 有關(guān)系，給定相同的 props 和 state 就會(huì)渲染出相同的結(jié)果，那么這個(gè)組件就叫做純組件，換一句話說(shuō)純組件只依賴于組件的 props 和 state，下面的代碼表示的就是一個(gè)純組件。

   render() {
     return (
       <div style={{width: this.props.width}}>
           {this.state.rows}
       </div>
     );
  }

如果某個(gè)子組件的 props 是固定的不會(huì)發(fā)生變化，我們叫做無(wú)狀態(tài)組件。在這個(gè)組件里面使用 pureRenderMixin 插件，能夠保證 shouldComponentUpdate 的返回一直為 false。所以，分清純組件和無(wú)狀態(tài)組件，在無(wú)狀態(tài)組件中重寫shouldComponentUpdate方法是最好的選擇。

key

在寫動(dòng)態(tài)子組件的時(shí)候，如果沒(méi)有給動(dòng)態(tài)子項(xiàng)添加key prop，則會(huì)報(bào)一個(gè)警告。這個(gè)警告指的是，如果每一個(gè)子組件是一個(gè)數(shù)組或者迭代器的話，那么必須有一個(gè)唯一的key prop，那么這個(gè)key prop是做什么的呢？
我們想象一下，假如需要渲染一個(gè)有5000項(xiàng)的成績(jī)排名榜單，而且每隔幾秒就會(huì)更新一次排名，其中大部分排名只是位置變了，還有少部分是完全更新了，這時(shí)候key就發(fā)揮作用了，它是用來(lái)標(biāo)識(shí)當(dāng)前的唯一性的props?，F(xiàn)在嘗試來(lái)描述這一場(chǎng)景

  [{
   sid: '10001',
   name: 'sysuzhyupeng'
  }, {
   sid: '10008',
   name: 'zhyupeng'
  }, {
   sid: '120000',
   name: 'yupeng'
  }]

其中sid是學(xué)號(hào)，那么我們來(lái)實(shí)現(xiàn)成績(jī)排名的榜單

  import React from 'react';
  function Rank({ list }){
    return (
     <ul>
       {list.map((entry, index)=>(
         <li key={index}>{entry.name}</li>
       ))}
     </ul>
    )
  }

我們把key設(shè)成了序號(hào)，這么做的確不會(huì)報(bào)警告了，但這樣是非常低效的做法，這個(gè)key是用來(lái)做virtual Dom diff的，上面的做法相當(dāng)于用了一個(gè)隨機(jī)鍵，那么不論有沒(méi)有相同的項(xiàng)，更新都會(huì)重新渲染。

正確的做法非常簡(jiǎn)單，只需要把key的內(nèi)容換成sid就可以了。

那么還有另一個(gè)問(wèn)題，當(dāng)key相同的時(shí)候，React會(huì)怎么渲染呢，答案是只渲染第一個(gè)相同key的項(xiàng)，且會(huì)報(bào)一個(gè)警告。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論