React 的 PureComponent Vs Component

shuxiaotai發表於2018-08-01
React

一.它們幾乎完全相同，但是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，因為根本沒有必要

相關文章