react 基础理解2

1. 性能优化之 PureComponent

• PureComponent 是内部定制了 shouldComponentUpdate 生命周期的 Component
  • 它重写了一个方法来替换 shouldComponentUpdate 生命周期方法
• 平常在开发过程中能使用到 PureComponent 的地方应该都尽量使用
• 想要使用 PureComponent 特性需要记住两个小要求
  • 确保数据类型是只类型，因为只进行浅比较，复杂类型可能不会生效
  • 如果是引用类型，确保地址不变，同时不应当有深层次数据变化
• 使用 PureComponent 可以省去 shouldComponentUpdate 生命周期的代码

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

class Title extends PureComponent {
    render(){
        return (
            <div>{ this.props.title }</div>
        )
    }
}

class Count extends Component {
    render(){
        return (
            <div>{ this.props.count }</div>
        )
    }
}

export default class Purememo extends Component {
    constructor(props){
        super(props)
        this.state = {
            title: "计时器",
            count: 0
        }
    }

    componentDidMount(){
        setInterval(()=>{
            this.setState({
                count: this.state.count + 1
            })
        }, 1000)
    }

    render(){
        const { title, count } = this.state;
        return (
            <>
                <Title title={title}></Title>
                <Count count={count}></Count>
            </>
        )
    }
} 

2. 性能优化之 React.memo

• React.memo 是一个高阶组件的写法
• React.memo 让函数组件也拥有 PureComponent 的功能

const Title = React.memo((props)=>{
    return (
        <div>{ this.props.title }</div>
    )
})