PureComponent有什么用？
一般组件的shouldComponentUpdate默认返回的是true,但是一旦父组件及时状态或props没有变化，也会造成子组件的render调用，这是很不合理的，我们可以让子组件继承自PureComponent来解决这个问题。
PureComponent的基本原理
- 重写了shouldComponentUpdate方法。
- 对组件的新/旧 state和props中的数据进行浅比较，如果没有变化则返回false，反之返回true.
PureComponent用法实例
import React, { Component,PureComponent } from 'react' import ReactDOM from 'react-dom' class App extends Component { state = { m1: 1 } test1 = () => { this.setState(state => ({ m1: state.m1 + 1 })) // this.setState({}) } render() { console.log('调用了A render: '); return ( <div> <h1>A组件：m1={this.state.m1}</h1> <button onClick={this.test1}>A 测试1</button> <B m1={this.state.m1}/> </div> ) } } class B extends PureComponent { state = { m2: 1 } test2 = () => { this.setState({}) } render() { console.log('调用了 B render: '); return ( <div> <h1>B组件：m2={this.state.m2}, m1={this.props.m1}</h1> <button onClick={this.test2}>B 测试2</button> </div> ) } } ReactDOM.render(<App />, document.querySelector('#root')); 复制代码
codeSandBox在线演示
