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

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),柳北企業(yè)網(wǎng)站建設(shè),柳北品牌網(wǎng)站建設(shè),網(wǎng)站定制,柳北網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,柳北網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

React避免重復渲染

React在渲染出的UI內(nèi)部建立和維護了一個內(nèi)層的實現(xiàn)方式，它包括了從組件返回的React元素。這種實現(xiàn)方式使得React避免了一些不必要的創(chuàng)建和關(guān)聯(lián)DOM節(jié)點，因為這樣做可能比直接操作JavaScript對象更慢一些，它被稱之為“虛擬DOM”。

當一個組件的props或者state改變時，React通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的DOM。當他們不相等時，React會更新DOM。

在一些情況下，你的組件可以通過重寫這個生命周期函數(shù)shouldComponentUpdate來提升速度， 它是在重新渲染過程開始前觸發(fā)的。 這個函數(shù)默認返回true，可使React執(zhí)行更新：

shouldComponentUpdate(nextProps, nextState) {
 return true;
}

舉例

如果想讓組件只在props.color或者state.count的值變化時重新渲染，你可以像下面這樣設(shè)定shouldComponentUpdate：

class CounterButton extends React.Component {
 constructor(props) {
  super(props);
  this.state = {count: 1};
 }

 shouldComponentUpdate(nextProps, nextState) {
  if (this.props.color !== nextProps.color) {
   return true;
  }
  if (this.state.count !== nextState.count) {
   return true;
  }
  return false;
 }

 render() {
  return (
   <button
    color={this.props.color}
    onClick={() => this.setState(state => ({count: state.count + 1}))}>
    Count: {this.state.count}
   </button>
  );
 }
}

在以上代碼中，shouldComponentUpdate只檢查props.color和state.count的變化。如果這些值沒有變化，組件就不會更新。當你的組件變得更加復雜時，你可以使用類似的模式來做一個“淺比較”，用來比較屬性和值以判定是否需要更新組件。這種模式十分常見，因此React提供了一個輔助對象來實現(xiàn)這個邏輯 - 繼承自React.PureComponent。以下代碼可以更簡單的實現(xiàn)相同的操作：

class CounterButton extends React.PureComponent {
 constructor(props) {
  super(props);
  this.state = {count: 1};
 }

 render() {
  return (
   <button
    color={this.props.color}
    onClick={() => this.setState(state => ({count: state.count + 1}))}>
    Count: {this.state.count}
   </button>
  );
 }
}

PureComponent

原理

當組件更新時，如果組件的 props 和 state 都沒發(fā)生改變， render 方法就不會觸發(fā)，省去 Virtual DOM 的生成和比對過程，達到提升性能的目的。具體就是 React 自動幫我們做了一層淺比較：

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

而 shallowEqual 又做了什么呢？會比較 Object.keys(state | props) 的長度是否一致，每一個 key 是否兩者都有，并且是否是一個引用，也就是只比較了第一層的值，確實很淺，所以深層的嵌套數(shù)據(jù)是對比不出來的。

問題

大部分情況下，你可以使用React.PureComponent而不必寫你自己的shouldComponentUpdate，它只做一個淺比較。但是由于淺比較會忽略屬性或狀態(tài)突變的情況，此時你不能使用它。

class ListOfWords extends React.PureComponent {
 render() {
  return <div>{this.props.words.join(',')}</div>;
 }
}

class WordAdder extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   words: ['marklar']
  };
  this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
  // This section is bad style and causes a bug
  const words = this.state.words;
  words.push('marklar');
  this.setState({words: words});
 }

 render() {
  return (
   <div>
    <button onClick={this.handleClick} />
    <ListOfWords words={this.state.words} />
   </div>
  );
 }
}

在ListOfWords中，this.props.words是WordAdder中傳入的其state的一個引用。雖然在WordAdder的handelClick方法中被改變了，但是對于ListOfWords來說，其引用是不變的，從而導致并沒有被更新。

解決方法

在上面的問題中可以發(fā)現(xiàn)，當一個數(shù)據(jù)是不變數(shù)據(jù)時，可以使用一個引用。但是對于一個易變數(shù)據(jù)來說，不能使用引用的方式給到PureComponent。簡單來說，就是我們在PureComponent外層來修改其使用的數(shù)據(jù)時，應該給其賦值一個新的對象或者引用，從而才能確保其能夠進行重新渲染。例如上面例子中的handleClick可以通過以下幾種來進行修改從而確認正確的渲染：

handleClick() {
 this.setState(prevState => ({
  words: prevState.words.concat(['marklar'])
 }));
}

或者

handleClick() {
 this.setState(prevState => ({
  words: [...prevState.words, 'marklar'],
 }));
};

或者針對對象結(jié)構(gòu)：

function updateColorMap(oldObj) {
 return Object.assign({}, oldObj, {key: new value});
}

immutable.js

Immutable.js是解決這個問題的另一種方法。它通過結(jié)構(gòu)共享提供不可突變的，持久的集合：

• 不可突變:一旦創(chuàng)建，集合就不能在另一個時間點改變。

• 持久性:可以使用原始集合和一個突變來創(chuàng)建新的集合。原始集合在新集合創(chuàng)建后仍然可用。

• 結(jié)構(gòu)共享:新集合盡可能多的使用原始集合的結(jié)構(gòu)來創(chuàng)建，以便將復制操作降至最少從而提升性能。

// 常見的js處理
const x = { foo: 'bar' };
const y = x;
y.foo = 'baz';
x === y; // true

// 使用 immutable.js

const SomeRecord = Immutable.Record({ foo: null });
const x = new SomeRecord({ foo: 'bar' });
const y = x.set('foo', 'baz');
x === y; // false

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

分享標題：PureComponent如何在React中使用
網(wǎng)站地址：http://jinyejixie.com/article36/psiopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、虛擬主機、云服務(wù)器、網(wǎng)站策劃、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站導航

廣告

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