PureComponent Vs Component

一.它們幾乎完全相同，但是PureComponent通過prop和state的淺比較來實現shouldComponentUpdate，某些情況下可以用PureComponent提升性能

1.所謂淺比較(shallowEqual)，即react源碼中的一個函數，然後根據下面的方法進行是不是PureComponent的判斷，幫我們做了本來應該我們在shouldComponentUpdate中做的事情

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

而本來我們做的事情如下，這裏判斷了state有沒有發生變化（prop同理），從而決定要不要重新渲染，這裏的函數在一個繼承了Component的組件中，而這裏this.state.person是一個對象，你會發現，在這個對象的引用沒有發生變化的時候是不會重新render的（即下面提到的第三點），所以我們可以用shouldComponentUpdate進行優化，這個方法如果返回false，表示不需要重新進行渲染，返回true則重新渲染，默認返回true

  shouldComponentUpdate(nextProps, nextState) {
    return (nextState.person !== this.state.person);
  }

2.上面提到的某些情況下可以使用PureComponent來提升性能，那具體是哪些情況可以，哪些情況不可以呢，實踐出真知

3.如下顯示的是一個IndexPage組件，設置了一個state是isShow，通過一個按鈕點擊可以改變它的值，結果是：初始化的時候輸出的是constructor，render，而第一次點擊按鈕，會輸出一次render，即重新渲染了一次，界面也會從顯示false變成顯示true，但是當這個組件是繼承自PureComponent的時候，再點擊的時，不會再輸出render，即不會再重新渲染了，而當這個組件是繼承自Component時，還是會輸出render，還是會重新渲染，這時候就是PureComponent內部做了優化的體現

4.同理也適用於string，number等基本數據類型，因爲基本數據類型，值改變了就算改變了

import React, { PureComponent } from 'react';

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      isShow: false
    };
    console.log('constructor');
  }
  changeState = () => {
    this.setState({
      isShow: true
    })
  };
  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.changeState}>點擊</button>
        <div>{this.state.isShow.toString()}</div>
      </div>
    );
  }
}

5.當這個this.state.arr是一個數組時，且這個組件是繼承自PureComponent時，初始化依舊是輸出constructor和render，但是當點擊按鈕時，界面上沒有變化，也沒有輸出render，證明沒有渲染，但是我們可以從下面的註釋中看到，每點擊一次按鈕，我們想要修改的arr的值已經改變，而這個值將去修改this.state.arr,但是因爲在PureComponent中淺比較這個數組的內存地址沒有變化 (這個地方類似於淺拷貝和深拷貝) 所以PureComponent認爲這個值是沒有改變的就沒有執行render渲染.

6.但是當這個組件是繼承自Component的時候，初始化依舊是輸出constructor和render，但是當點擊按鈕時，界面上出現了變化，即我們打印處理的arr的值輸出，而且每點擊一次按鈕都會輸出一次render，證明已經重新渲染，this.state.arr的值已經更新，所以我們能在界面上看到這個變化

import React, { PureComponent } from 'react';

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      arr:['1']
    };
    console.log('constructor');
  }
  changeState = () => {
    let { arr } = this.state;
    arr.push('2');
    console.log(arr);
    // ["1", "2"]
    // ["1", "2", "2"]
    // ["1", "2", "2", "2"] 
    // ....
    this.setState({
      arr
    })
  };
  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.changeState}>點擊</button>
        <div>
          {this.state.arr.map((item) => {
            return item;
          })}
        </div>
      </div>
    );
  }
}

7.下面的例子用擴展運算符產生新數組，使this.state.arr的引用發生了變化，所以初始化的時候輸出constructor和render後，每次點擊按鈕都會輸出render，界面也會變化，不管該組件是繼承自Component還是PureComponent的

import React, { PureComponent } from 'react';

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      arr:['1']
    };
    console.log('constructor');
  }
  changeState = () => {
    let { arr } = this.state;
    this.setState({
      arr: [...arr, '2']
    })
  };
  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.changeState}>點擊</button>
        <div>
          {this.state.arr.map((item) => {
            return item;
          })}
          </div>
      </div>
    );
  }
}

8.上面的情況同樣適用於對象的情況

二.PureComponent不僅會影響本身，而且會影響子組件，所以PureComponent最佳情況是展示組件

1.我們讓IndexPage組件裏面包含一個子組件Example來展示PureComponent是如何影響子組件的

2.父組件繼承PureComponent，子組件繼承Component時：下面的結果初始化時輸出爲constructor，IndexPage render，example render，但是當我們點擊按鈕時，界面沒有變化，因爲這個this.state.person對象的引用沒有改變，只是改變了它裏面的屬性值所以儘管子組件是繼承Component的也沒有辦法渲染，因爲父組件是PureComponent，父組件根本沒有渲染，所以子組件也不會渲染

3.父組件繼承PureComponent，子組件繼承PureComponent時：因爲渲染在父組件的時候就沒有進行，相當於被攔截了，所以子組件是PureComponent還是Component根本不會影響結果，界面依舊沒有變化

4.父組件繼承Component，子組件繼承PureComponent時：結果和我們預期的一樣，即初始化是會輸出constructor，IndexPage render，example render，但是點擊的時候只會出現IndexPage render，因爲父組件是Component，所以父組件會渲染，但是
當父組件把值傳給子組件的時候，因爲子組件是PureComponent，所以它會對prop進行淺比較，發現這個person對象的引用沒有發生變化，所以不會重新渲染，而界面顯示是由子組件顯示的，所以界面也不會變化

5.父組件繼承Component，子組件繼承Component時：初始化是會輸出constructor，IndexPage render，example render，當我們第一次點擊按鈕以後，界面發生變化，後面就不再改變，因爲我們一直把它設置爲sxt2，但是每點擊一次都會輸出IndexPage render，example render，因爲每次不管父組件還是子組件都會渲染

6.所以正如下面第四條說的，如果state和prop一直變化的話，還是建議使用Component，並且PureComponent的最好作爲展示組件

//父組件
import React, { PureComponent, Component } from 'react';
import Example from "../components/Example";

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      person: {
        name: 'sxt'
      }
    };
    console.log('constructor');
  }
  changeState = () => {
    let { person } = this.state;
    person.name = 'sxt2';
    this.setState({
      person
    })
  };
  render() {
    console.log('IndexPage render');
    const { person } = this.state;
    return (
      <div>
        <button onClick={this.changeState}>點擊</button>
        <Example person={person} />
      </div>
    );
  }
}
//子組件
import React, { Component } from 'react';

class Example extends Component {

  render() {
    console.log('example render');
    const { person } = this.props;
    return(
      <div>
        {person.name}
      </div>
    );
  }
}

三.若是數組和對象等引用類型，則要引用不同，纔會渲染

四.如果prop和state每次都會變，那麼PureComponent的效率還不如Component，因爲你知道的，進行淺比較也是需要時間

五.若有shouldComponentUpdate，則執行它，若沒有這個方法會判斷是不是PureComponent，若是，進行淺比較

1.繼承自Component的組件，若是shouldComponentUpdate返回false，就不會渲染了，繼承自PureComponent的組件不用我們手動去判斷prop和state，所以在PureComponent中使用shouldComponentUpdate會有如下警告:

IndexPage has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

也是比較好理解的，就是不要在PureComponent中使用shouldComponentUpdate，因爲根本沒有必要

作者：shuxiaotai
鏈接：https://www.jianshu.com/p/c41bbbc20e65
來源：簡書