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>
        )
    }
}