[React] 12.React -组件生命周期函数

在React中，生命周期函数指的是组件在某一时刻会自动执行的函数

1. 初始化阶段（Initialization): 没有生命周期函数，只是在constructor里做数据的设置
2. 页面挂载阶段（Mounting): 只有页面在第一次渲染的时候才会执行Mounting过程
   1. componentWillMount函数：准备挂载
      2）render函数：挂载
      3）componentDidMount函数：挂在完毕
3. 更新（Updation): 数据发生变化时执行
   1).shouldComponentUpdate(): 需要返回一个布尔类型的值,默认值为true,通常情况下如果不需要刷新页面，该值设置为false，可提升组件性能，为false后不会再执行该函数后面的生命周期函数。
   2). componentWillUpdate()
   3). render()
   4). componentDidUpdate()
4. 组件销毁时会执行：componentWillUnmount()

完整代码：
counter.js中

import React, {Component, Fragment} from "react";
import Child from "./child";
// 生命周期函数指的是组件在某一时刻会自动执行的函数

class Counter extends Component {

    constructor(props) {
        super(props);
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.state = {
            counter: 1
        }
    }

    handleBtnClick() {
        // ref写在html标签上，获取的是dom节点；
		// ref写在组件标签上，获取的是组件的js实例
        console.log(this.buttonElem.clientTop);
        console.log(this.childElem)
        const newCounter = this.state.counter + 1
        // setState是异步的
        this.setState(() => {
            return {
                counter: newCounter
            }
        },() => {

        });
    }

    // 挂载前自动执行
    componentWillMount() {
        console.log('componentWillMount')
    }

    // 当数据发生变化时，render函数会被执行
    // 组件更新前，componentWillUpdate之后自动执行
    render() {
        console.log('render')
        // 当组件初次创建的时候，rendere函数会被执行一次
        // 当state数据发生变更的时候，render函数会被重新执行
        // 当props数据发生变更的时候，render函数会被重新执行
        return (
            <Fragment>
                <button onClick={this.handleBtnClick} ref={(button)=>{this.buttonElem = button}}>增加</button>
                <Child ref={(child)=>{this.childElem = child}} number={this.state.counter}/>
            </Fragment>
        )
    }

    // 挂载后自动执行
    componentDidMount() {
        console.log('componentDidMount');
    }

    // 组件更新前自动执行
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate');
        return true;
    }

    // 组件更新前shouldComponentUpdate之后自动执行
    componentWillUpdate() {
        console.log('componentWillUpdate')
    }

    // 组件更新前render之后自动执行
    componentDidUpdate() {
        console.log('componentDidUpdate')
    }

    // 组件从页面中移除前自动执行
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }
}

export default Counter