所有生命周期的详细应用

我又来了。
这次来一波完整的。
代码效果是一个按钮，点击一次数字增加1，很普通的效果，只是别忘了打开控制台，看生命周期的变化。这个才是亮点。

import React, { Component } from 'react';
// 封装组件
class Hellow extends React.Component{
    constructor(props){
        super(props);
        // 设置初始data为0
        this.state = {data:0};
        // 为事件函数绑定this
        this.setNewNumber = this.setNewNumber.bind(this)
    }
    // 事件
    setNewNumber(){
        // 设置 setState   将当前最新的 data 赋值给data
        this.setState({data:this.state.data +1})
    }



    render(){
        return(
            <div>
                {/* 绑定点击事件 */}
                <button onClick={this.setNewNumber}>增加</button>
                {/* 嵌套组件 将最新的 data 赋值给myNumber */}
                <Content myNumber = {this.state.data}/>
            </div>
        );
    }
}


class Content extends React.Component{
    // 初始化调用
    componentWillMount(){
        console.log("初始化渲染调用")
    }
    // 组件渲染之后调用
    componentDidmount(){
        console.log('组件渲染之后调用，只调用一次')
    }
    // 父级更新时调用
    componentWillReceiveProps(){
        console.log('初始化时不调用，组件接收新的props说明父级更新，此时调用')
    }
    // 组件收到新的state或者props时调用
    shouldComponentUpdate(newProps,newState){
        console.log('我是用来做性能优化的，组件接收新的state或者props时调用，我显示是因为有更新')
        return true;
    }
    // 组件更新时调用
    componentWillUpdate(nexProps,nexState){
        console.log('初始化时不调用，只在组件将要更新时才调用，此时可以修改state')
    }
    // 更新完成后调用
    componentDidUpdate(prevProps,prevState){
        console.log('组件初始化时不调用，更新完成后才调用，这时可以获取DOM节点')
    }
    // 组件卸载时调用
    componentWillUnmount(){
        console.log('组件卸载时调用，此时清除事件监听和定时器')
    }
    render(){
        return(
            <div>
                {/* 设置显示当前的myNumber */}
                <h3>{this.props.myNumber}</h3>
            </div>
        )
    }

}


export default Hellow;