PureComponent和React.memo()区别

---

前言

本篇文章主要讲解了，PureComponent和React.memo()区别及用法。

---

一、区别

PureComponent 和 React.memo() 都是 React 中优化组件性能的方式。

1. PureComponent 是一个类组件，而 React.memo() 是一个高阶函数。

2. React.memo 是一个高阶函数，它接受一个组件并返回一个新的组件，它通过浅比较当前和之前的 props 值来判断是否应该重新渲染组件。它提供第二个参数来自定义比较逻辑，可以用在深层次的比较上面。如果 props 没有变化，则组件不会重新渲染。

3. React.PureComponent 是一个类组件，它通过比较当前和之前的 props 和 state 值来检查是否需要重新渲染组件。如果 state 和 props 没有发生变化，则组件不会重新渲染。在PureComponent内部，它实现了一个shouldComponentUpdate方法，用于判断组件是否需要更新。这个方法默认会对组件的state和props进行浅比较，如果没有变化，那么就会返回false，阻止重新渲染。

二、用法

使用PureComponent 效果
这是一个app组件—负责更新props给到子组件

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      appProps: "---AppProps---"
    }
  }
  updateProps = () => {
    this.setState({appProps: '---update AppProps---'})
  }
  render() {
    const {appProps, show} = this.state
    return (
      <div className="App">
        <TestLifeCycle appProps={appProps} />
        <button onClick={this.updateProps}>更新props</button>
      </div>
    )
  }
}
export default App

这是一个子组件—负责更新自己的state，和接收了一个app的props

class TestLifeCycle extends PureComponent {

  constructor () {
    console.log('constructor---')
    super()
    this.state = {
      state1: 'This is a React class.'
    }
  }

  updateState = () => {
    this.setState({
      state1: 'This is a React class. updateState'
    })
  }

  render () {
    console.log('render---')
    const { appProps } = this.props
    return (
      <>
        <div>{ this.state.state1 }</div>
        <div>{ appProps }</div>
        <button onClick={ this.updateState }>更新state</button>
      </>
    )
  }
}
export default TestLifeCycle

更新之前效果
更新state和props之后效果
当我多次点击更新state和更新props的时候，可以看到控制台只是做了两次render。达到了我们的预期效果。
下面我们把数据结构调整为对象再看看：

this.state = {
  state1: {
    text: 'This is a React class.'
  }
}

能看到当我们改成对象，并更新state时，多次点击，会多次渲染，并不能实现，这个时候我们可以使用生命周期钩子来优化，也可以达到效果。

shouldComponentUpdate(props, state) {
  console.log(props,state)
  if (state.state1.text === this.state.state1.text) {
    return false
  }
  return true
}

同理修改props也是这样的效果。

使用React.mome()效果
导出时用React.memo，并接受两个参数，一个是组件本身，一个是修改props的回调，可在这里做优化，返回一个boolean值，由于这里的比较也是浅比较，所以深层次的比较还是得用到回调函数。

export default React.memo(TestLifeCycle, (preProps, nextProps) => {
  console.log(preProps, nextProps)
  if (preProps.appProps.text === nextProps.appProps.text) {
    return false
  }
  return true
})

具体效果不贴了，感兴趣可以实际操作一下。

---

如果有问题欢迎指正