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，由于根本没有必要