REACT 生命周期 （ JS胖老师课程  ）

---

生命周期函数指在某一个时刻组件会自动调用执行的函数 

REACT生命周期的四大过程

Initialization:初始化阶段。

Mounting: 挂在阶段。

Updation: 更新阶段。

Unmounting: 销毁阶段

Mounting阶段叫挂载阶段

componentWillMount : 在组件即将被挂载到页面的时刻执行。

render : 页面state或props发生变化时执行。

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

注意：

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

Updation阶段：

Updation阶段,也就是组件发生改变的更新阶段

1.shouldComponentUpdate(){ console.log('shouldComponentUpdate---组件发生改变前执行')}   返回类型是布尔值 ;在组件接收到新的props或者state时被调用

2.componentWillUpdate在组件更新之前，但shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false，这个函数就不会被执行了。

shouldComponentUpdate返回true才会被执行。componentWillUpdate(){ console.log('componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')}

3.componentDidUpdate在组件更新之后执行，它是组件更新的最后一个环节。

componentDidUpdate(){    console.log('componentDidUpdate----组件更新之后执行')}

执行顺序

1-shouldComponentUpdate---组件发生改变前执行

2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行

3-render----开始挂载渲染

4-componentDidUpdate----组件更新之后执行

componentWillReceiveProps

在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。

也就是说这个组件第一次存在于Dom中，函数是不会被执行的;

如果已经存在于Dom中，函数才会被执行。

componentWillUnmount卸载

在组件从 DOM 中移除之前立刻被调用。

注：仅供学习备忘录使用 如有侵权，请联系删除