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变化就会执行，这个一定要注意。