PureComponent

• 定制了shouldComponentUpdate后的Component,实现性能优化
• 浅比较state，必须要用class形式
• React.PureComponent中的shouldComponentUpdate() 将跳过所有子组件树的prop更新，所以子组件也必须确保都是纯组件

import React, { Component, PureComponent } from 'react'

export default class PuComponent extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            count: 0,
            obj: {
                num: 0
            }
        }
    }

    changeCount = () => {
        this.setState({
            count: 100
        })
    }

    changeObjNum = () => {
        this.setState({
            obj: {
                num: 100
            }
        })
    }

    // shouldComponentUpdate(preProps, preState) {
    //     return preState.count !== this.state.count
    // }

    render() {
        console.log("render");
        const { count, obj: { num } } = this.state
        return (
            <div>
                <h3>PureComponent</h3>
                <button onClick={this.changeCount}>{count}</button>
                <button onClick={this.changeObjNum}>{num}</button>
            </div>
        )
    }
}