如何在React.js中使用PureComponent？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

十年建站經(jīng)驗(yàn)， 成都網(wǎng)站建設(shè)、成都網(wǎng)站制作客戶的見證與正確選擇。創(chuàng)新互聯(lián)提供完善的營銷型網(wǎng)頁建站明細(xì)報價表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。

一、介紹PureComponent

React 15.3在2016.06.29發(fā)布了，這個版本最值得關(guān)注的是支持了 React.PureComponent ，它取代了之前的 pure-render-mixin 。在本文中，我們將討論 PureComponent 的重要性和使用場景。

React.PureComponent最重要的一個用處就是優(yōu)化React應(yīng)用，這很容易快速地實(shí)現(xiàn)。使用 React.PureComponent 對性能的提升是非?？捎^的，因?yàn)樗鼫p少了應(yīng)用中的渲染次數(shù)。

PureComponent改變了生命周期方法 shouldComponentupdate ，并且它會自動檢查組件是否需要重新渲染。這時，只有PureComponent檢測到 state 或者 props 發(fā)生變化時，PureComponent才會調(diào)用 render 方法，因此，你不用手動寫額外的檢查，就可以在很多組件中改變 state ， 例如：

if (this.state.someVal !== computedVal) {
 this.setState({ someVal: computedVal })
}

根據(jù)React源碼，如果組件是純組件(Pure Component)，那么一下比較是很容易理解的：

if (this._compositeType === CompositeTypes.PureClass) {
 shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

其中， shadowEqual 只會"淺"檢查組件的 props 和 state ，這就意味著嵌套對象和數(shù)組是不會被比較的。

深比較操作是非常昂貴的，同時，如果這個組件還是純組件(PureComponent)，那么深比較將會更浪費(fèi)。另外，你也可以使用 shouldComponentUpdate 來手動確定組件是否需要重新渲染。最簡單的方式就是直接比較 props 或 state :

shouldComponentUpdate(nextProps, nextState) {
 return nextProps.user.id === props.user.id;
}

除此之外，你可以使用 immutable 屬性。這種情況下，屬性的比較是非常容易的，因?yàn)橐汛嬖诘膶ο蟛粫l(fā)生改變，取而代之的是重新創(chuàng)建新的對象。其中， Immutable.js 就是非常好的Immutable庫。

二、使用PureComponent

PureComponent節(jié)約了我們的時間，避免了多余的代碼。那么，掌握如何正確使用它是非常重要的，否則如果使用不當(dāng)，它就無法發(fā)揮作用。因?yàn)镻ureComponent僅僅是淺比較(shadow comparison)，所以改變組件內(nèi)部的 props 或者 state ，它將不會發(fā)揮作用。例如，讓我們想想這樣一種情況，父組件有一個render方法和一個click處理方法：

handleClick() {
 let {items} = this.state

 items.push('new-item')
 this.setState({ items })
}

render() {
 return (
  <div>
   <button onClick={this.handleClick} />
   <ItemList items={this.state.items} />
  </div>
 )
}

如果ItemList是純組件(PureComponent)，那么這時它是不會被渲染的，因?yàn)楸M管 this.state.items 的值發(fā)生了改變，但是它仍然指向同一個對象的引用。但是，通過移除可變對象就很容易改變這種情況，使之能夠正確被渲染。

handleClick() {
 this.setState(prevState => ({
  words: prevState.items.concat(['new-item'])
 }));
}

如果一個純組件(PureComponent)的 state 或 props 引用了一個新對象，那么這個組件就會被重新渲染(re-render)。這暗示著，如果不想損失PureComponent的優(yōu)點(diǎn)，那么我們應(yīng)該避免以下的結(jié)構(gòu)：

<Entity values={this.props.values || []}/>

如上面代碼，新數(shù)組，即便是空數(shù)組，總是會迫使組件重新渲染。為了避免這個問題，你可以使用 defaultProps ，它包含了一個屬性的初始化空狀態(tài)。解決這個問題的另一種方法如下：

<CustomInput onChange={e => this.props.update(e.target.value)} />

在純組件(PureComponent)被創(chuàng)建時，因?yàn)楹瘮?shù)的新對象被創(chuàng)建了，所以它會獲得新數(shù)據(jù)，并且重新渲染。解決這個問題最簡單的方法就是: 在組件的 constructor 方法中使用 bind 。

constructor(props) {
  super(props)
  this.update = this.update.bind(this)
}
update(e) {
  this.props.update(e.target.value)
}
render() {
  return <MyInput onChange={this.update} />
}

同時，在JSX中，任何包含子元素(child elements)的組件， shallowEqual 檢查總會返回false。

請謹(jǐn)記：純組件忽略重新渲染時，不僅會影響它本身，而且會影響它的說有子元素，所以，使用PureComponent的最佳情況就是展示組件，它既沒有子組件，也沒有依賴應(yīng)用的全局狀態(tài)。

看完上述內(nèi)容，你們掌握如何在React.js中使用PureComponent的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前標(biāo)題：如何在React.js中使用PureComponent
鏈接地址：http://chinadenli.net/article38/jiepsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)