React的PureComponent和Component的区别

它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能

浅比较(shallowEqual),即react源码中的一个函数,然后根据下面的方法进行是不是PureComponent的判断,帮我们做了本来应该我们在shouldComponentUpdate中做的事情

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

哪些情况下可以使用PureComponent来提升性能?

栗子1:

如下显示的是一个IndexPage组件,设置了一个state是isShow,通过一个按钮点击可以改变它的值,结果是:初始化的时候输出的是constructor,render,而第一次点击按钮,会输出一次render,即重新渲染了一次,界面也会从显示false变成显示true,但是当这个组件是继承自PureComponent的时候,再点击的时,不会再输出render,即不会再重新渲染了,而当这个组件是继承自Component时,还是会输出render,还是会重新渲染,这时候就是PureComponent内部做了优化的体现,同理也适用于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>
    );
  }
}

栗子2:

  • 当这个this.state.arr是一个数组时,且这个组件是继承自PureComponent时,初始化依旧是输出constructor和render,但是当点击按钮时,界面上没有变化,也没有输出render,证明没有渲染,但是我们可以从下面的注释中看到,每点击一次按钮,我们想要修改的arr的值已经改变,而这个值将去修改this.state.arr,但是因为在PureComponent中浅比较这个数组的引用没有变化所以没有渲染,但是实际上this.state.arr已经更新了,只是没有渲染,表现出来给用户看到,这里涉及到this.setState()的知识。
  • 但是当这个组件是继承自Component的时候,初始化依旧是输出constructor和render,但是当点击按钮时,界面上出现了变化,即我们打印处理的arr的值输出,而且每点击一次按钮都会输出一次render,证明已经重新渲染,this.state.arr的值已经更新,所以我们能在界面上看到这个变化
  • 使用扩展运算符产生新数组,使this.state.arr的引用发生了变化,所以初始化的时候输出constructor和render后,每次点击按钮都会输出render,界面也会变化,不管该组件是继承自Component还是PureComponent的
class IndexPage extends PureComponent {
  constructor() {
    super();
    this.state = {
      arr: ['1'],
      obj: {
        name: "zlq"
      }
    };
    console.log('constructor');
  }
  //PureComponent中页面会警告,不建议在PureComponent中使用
  // shouldComponentUpdate(){
  //   return false;
  // }
  changeState = () => {
    let { arr } = this.state;
    arr.push('2') 
    var obj = {
      name: "zl"
    }
    this.setState({
      // obj
      // obj:{name:"Z"}
      arr // pureComponent下不会重新render
      // arr: [...arr, '2']
    })
  };
  render() {
    console.log('render');
    let { arr, obj } = this.state
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <div>
          {arr.map((item) => {
            return item;
          })}
          {obj.name}
        </div>
      </div>
    );
  }
}

export default IndexPage;

上面的情况同样适用于对象的情况,引用数据类型

PureComponent不仅会影响本身,而且会影响子组件,所以PureComponent最佳情况是展示组件

栗子3:

//父组件
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>
    );
  }
}

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的最好作为展示组件

若是数组和对象等引用类型,则要引用不同,才会渲染

如果prop和state每次都会变,那么PureComponent的效率还不如Component,因为你知道的,进行浅比较也是需要时间

若有shouldComponentUpdate,则执行它,若没有这个方法会判断是不是PureComponent,若是,进行浅比较

继承自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.

参考博客:https://www.jianshu.com/p/c41bbbc20e65
https://segmentfault.com/a/1190000014979065?utm_source=tag-newest

推荐阅读更多精彩内容