我们来看一看 Component 和 PureComponent 的区别，我们先从问题出发，通过解决实际的问题来查询出 PureComponent 和 Component 之间区别。这里创建 Greeting 的组件，其中我们用 setInterval 每间隔 2 秒就更新状态title一次，然后在 6 秒后调用 clearInterval 方法来取消这个打点器。

import react, { Component,Fragment } from 'react'

import TutSubtitle from './TutSubtitle'
import TutTitle from './TutTitle'

export default class Greeting extends Component {
    constructor(props){
        super(props);
        this.state = {
            title:Math.random(),
            subTitle:Math.random()
        }
    }

    componentDidMount(){
        const id = setInterval(() => this.setState({title: Math.random()}),2000);
        setTimeout(()=> clearInterval(id),6000);
        
    }
  render() {
    return (
      <Fragment>
        <TutTitle name={this.state.title}/>
        <TutSubtitle name={this.state.subTitle}/>
      </Fragment>
    )
  }
}

下面创建了个组件被别是 TutTitle 和 TutSubTitle

import React, { Component } from 'react'

export default class TutTitle extends Component {
  render() {
      console.log('rendering tut title ...');
    return (
      <div>
        <span>{this.props.name}</span>
      </div>
    )
  }
}

import React, { Component } from 'react'

export default class TutSubtitle extends Component {
  render() {
      console.log('rendering sub tittle...')
    return (
        <div>
        <span>{this.props.name}</span>
      </div>
    )
  }
}

其实我们每次只是更新状态 state 的 title 值，但是更新时同时也渲染 SubTitle

rendering tut title ...
TutSubtitle.js:5 rendering sub tittle...
TutTitle.js:5 rendering tut title ...
TutSubtitle.js:5 rendering sub tittle...
TutTitle.js:5 rendering tut title ...
TutSubtitle.js:5 rendering sub tittle...
TutTitle.js:5 rendering tut title ...
TutSubtitle.js:5 rendering sub tittle...

我们可以通过 shouldComponentUpdate 来阻止组件跟随其父级组件 state 的变化而更新。如果在 shouldComponentUpdate 返回 true 时，只要父级组件 state 更新其就随之更新。

    shouldComponentUpdate(nextProps, nextState, nextContext) {
         return false;
    }

也可以更精确地进行控制通过对比 nextProps.name !== this.props.name;来实现。

    shouldComponentUpdate(nextProps, nextState, nextContext) {
         return nextProps.name !== this.props.name;
    }

完整代码如下

export default class TutSubtitle extends Component {

    shouldComponentUpdate(nextProps, nextState, nextContext) {
         return nextProps.name !== this.props.name;
    }
  render() {
      console.log('rendering sub tittle...')
    return (
        <div>
        <span>{this.props.name}</span>
      </div>
    )
  }
}

当然可以使用 PureComponent 类型来创建 Subtitle 组件，因为 PureComponent 的特殊性我们就无需做额外工作也能够达到预期的效果。

在 PureComponent 在使用 shouldComponentUpdate的处理是由 PureComponent 自身来处理，而不是由用户来控制，所以我们在 PureComponent 中如果复写此生命周期回调函数，React 会提示我们错误的。告诉我们不允许重写该方法。

    shouldComponentUpdate(nextProps, nextState, nextContext) {
         return nextProps.name !== this.props.name;
    }

以上就是通过实际开发场景来分享 PureComponent 与 Component 的不同之处。

链接: https://fly63.com/article/detial/5781