react 生命周期-1

React生命周期图

16.4之前版本图，下面的介绍会有版本的区别

通过这张图你可以看到React声明周期的四个大阶段：

• Initialization:初始化阶段。
• Mounting: 挂在阶段。
• Updation: 更新阶段。
• Unmounting: 销毁阶段

什么是生命周期函数

如果非要用一句话把生命周期函数说明白，我觉的可以用这句话来说明：
生命周期函数组件从创建到结束的过程（生-死）
举例：写的小姐姐的例子。里边的render()函数，就是一个生命周期函数，它在state发生改变时自动执行。这就是一个标准的自动执行函数。

constructor不算生命周期函数。
constructor我们叫构造函数，它是ES6的基本语法。虽然它和生命周期函数的性质一样，但不能认为是生命周期函数。

但是你要心里把它当成一个生命周期函数，我个人把它看成React的Initialization阶段，定义属性（props）和状态(state)。

Mounting阶段

Mounting阶段叫挂载阶段，伴随着整个虚拟DOM的生成，它里边有三个小的生命周期函数，分别是：
16.4之前版本
componentWillMount : 在组件即将被挂载到页面的时刻执行。

    componentWillMount(){
        console.log("componentWillMount...组将将要挂载到页面")
    }

16.4版本之后

     static getDerivedStateFromProps(props,state){
       console.log(1,"组件即将挂载在DOM中")
      //  props 父级传递过来的数据  state自身的数据
       console.log(props, state);
       return state;
     }

下面两个声明周期是共用的，没有版本
render : 页面state或props发生变化时执行。

    render(){
        console.log("render...挂载中")
    }

componentDidMount : 组件挂载完成时被执行。

    componentDidMount(){
        console.log("componentDidMount...组将挂载完成的时候")
    }

componentWillMount 和 componentDidMount 这两个生命周期函数，只在页面刷新时执行一次，而render函数是只要有state和props变化就会执行，这个一定要注意。