React3.1PureComponent和React.memo

PureComponent是内部定制了shouldComponentUpdate⽣命周期的Component
它重写了⼀个⽅法来替换shouldComponentUpdate⽣命周期⽅法
平常开发过程中设计组件能使⽤PureComponent的地⽅都尽量使⽤
使⽤PureComponent特性要记住两点：
1.确保数据类型是值类型
2.如果是引⽤类型，确保地址不变，同时不应当有深层次数据变化

React.memo是⼀个⾼阶组件的写法
React.memo让函数组件也拥有了PureComponent的功能
PureComponent在es6 中的class组件使用，memo在function Component中使用

PureComponentss.js

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

//  class Name extends Component {
//     shouldComponentUpdate(nextProps){
//         return nextProps.name!==this.props.name
//     }
//     render() {
//         console.log('name组件')
//         return (
//             <div>
//     <p>姓名：{this.props.name}</p>
//             </div>
//         )
//     }
// }

//PureComponent
// class Name extends PureComponent {
//     render() {
//         console.log('name组件')
//         return (
//             <div>
//     <p>姓名：{this.props.name}</p>
//             </div>
//         )
//     }
// }

//React.meno
const Name=React.memo((props)=>{
    console.log('name组件')
    return (
        <div>
     <p>姓名：{props.name}</p>
             </div>
    )
})

 class Age extends Component {
    render() {
        console.log('age组件')
        return (
            <div>
    <p>年龄：{this.props.age}</p>
            </div>
        )
    }
}

export default class PureComponentss extends Component {
    constructor(props){
        super(props)
        this.state={
            name:'大狗',
            age:1
        }
    }
    componentDidMount(){
        setInterval(() => {
            this.setState({
                age:this.state.age+1
            })
        }, 1000);
    }
    render() {
        return (
            <div>
                <Name name={this.state.name}></Name>
                <Age age={this.state.age}></Age>
            </div>
        )
    }
}