React 的 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中淺比較這個數組的引用沒有變化因此沒有渲染，this.state.arr也沒有更新，由於在this.setState()之後，值是在render的時候更新的， 這裏涉及到this.setState()的知識

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，由於根本沒有必要