聊一聊React中Component、PureComponent以及memo的理解以及差异

Component和PureComponent

首先来说一下 Component 和 PureComponent 的区别，其实他们俩基本是一样的，因为后者继承前者，细微的区别就是 PureComponent 可能会帮我们提升程序的性能，怎么说呢？它的内部实现了 shouldComponentUpdate 方法，我们应该都知道这个方法是干嘛的吧，帮助我们减少不必要的 render，我们通常会在 shouldComponentUpdate 方法中判断props或者state的值是不是和之前的一样，然后来决定是否重新 render ，来看一个最简单的例子：

class Test extends PureComponent<any, any> {

  constructor(props: any) {
    super(props)
    this.state = {
      isShow: false,
    }
  }

  click = () => {
    this.setState({
      isShow: true
    })
  }

  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.click}>index</button>
        <p>{this.state.isShow.toString()}</p>
      </div>
    )
  }
}

在上面这个例子中，通过按钮去改变state中isShow这个属性的值，但是第一次改变之后后面这个值就不会变了，如果用PureComponent的话那么只会在第一次点击的时候会重新render，但是使用Component的话，那么每次点击都会触发render。所以这里使用PureComponent能帮我们提升一定的性能。那么有些人可能就会说那我是不是只用PureComponent就好了，那我只能说

image.png

我们把上面的isShow参数换一下，换成一个对象试试：

  constructor(props: any) {
    super(props)
    this.state = {
      user: {
        name: '24K纯帅',
        gender: '男'
      }
    }
    console.log('constructor');
  }

  click = () => {
    this.setState((preState: any) => {
      const { user } = preState
      user.name = "Jack"
      return { user }
    }, () => {
      console.log(this.state.user)
    })
  }

  render() {
    console.log('render');
    return (
      <div>
        <Button primary="true" onClick={this.click}>index</Button>
        <Button>{this.state.user.name}</Button>
      </div>
    )
  }
}

我们发现如果使用PureComponent的话，点击按钮之后都不会触发render了，使用Component才行，看到这里是不是脑袋一大堆问号

image.png

原来PureComponent内部实现的shouldComponentUpdate方法只是进行了浅比较，怎么说呢，你可以理解为只是针对基本数据类型才有用，对于对象这种引用数据类型是不行的。

React.memo()

其实这个和PureComponent功能是一样的，只不过memo是提供给函数组件使用的，而PureComponent是提供给class组件使用的，还有一点就是memo提供一个参数可以让我们自行配置可以对引用数据做比较然后触发render