前言

本篇文章主要讲解了，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.statereturn (<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.propsreturn (<><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
})

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

如果有问题欢迎指正