React高级-如何理解React的生命周期

1.React生命周期图

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

1. Initialization:初始化阶段。
2. Mounting: 挂在阶段。
3. Updation: 更新阶段。
4. Unmounting: 销毁阶段

2.什么是生命周期函数

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

• constructor不算生命周期函数。

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

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

3.Mounting阶段

Mounting阶段叫挂载阶段，伴随着整个虚拟DOM的生成，它里边有三个小的生命周期函数，分别是：

1. componentWillMount : 在组件即将被挂载到页面的时刻执行。
2. render : 页面state或props发生变化时执行。
3. componentDidMount : 组件挂载完成时被执行。

componentWillMount代码

componentWillMount(){
    console.log('componentWillMount----组件将要挂载到页面的时刻')
}

componentDidMount代码

componentDidMount(){
    console.log('componentDidMount----组件挂载完成的时刻执行')
}

render代码

render(){
    console.log('render---组件挂载中.......')
}

这时候我们查看一下控制台，会为我们打出如下提示：

componentWillMount----组件将要挂载到页面的时刻执行
render----开始挂载渲染
componentDidMount----组件挂载完成的时刻执行

这也是生命周期的顺序。有小伙伴会问我，这个函数书写有顺序吗?哪个在前？哪个在后？其实是没有顺序的，你可以随便改动他们的顺序。

注意的问题

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

4.Updation阶段

Updation阶段，就是组件发生改变的更新阶段，它有两个基本部分组成，一个是props属性改变，一个是state状态改变。它里边有四个小的生命周期函数，分别是：

1. shouldComponentUpdate : 函数会在组件更新之前，自动被执行。
2. componentWillUpdate : componentWillUpdate在组件更新之前，但shouldComponenUpdate之后被执行。
3. componentDidUpdate : 在组件更新之后执行，它是组件更新的最后一个环节。
4. componentWillReceiveProps：子组件接收到父组件传递过来的参数，父组件render函数重新被执行后执行。

1.shouldComponentUpdate函数会在组件发生变化之前执行。

shouldComponentUpdate(){
    console.log('1-shouldComponentUpdate---组件发生改变前执行')
  	return true
}

它要求返回一个布尔类型的结果，必须有返回值。

如果返回是false，该组件就不会进行更新。true反之。

2.componentWillUpdate函数会在组件发生变化之前执行，但在shouldComponentUpdate之后被执行，如果shouldComponentUpdate返回的是false，该函数就不会被执行。

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

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

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

最后我们可以看到控制台输出的结果如下：

1-shouldComponentUpdate---组件发生改变前执行
2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行
3-render----开始挂载渲染
4-componentDidUpdate----组件更新之后执行

4.componentWillReceiveProps函数式在子组件接收到父组件传递过来的参数，父组件render函数重新被执行，才会被执行。

• 也就是说这个组件第一次存在于Dom中，函数是不会被执行的;
• 如果已经存在于Dom中，函数才会被执行。

componentWillReceiveProps(){
        console.log('child - componentWillReceiveProps')
}

5.Unmounting阶段

Unmounting阶段就是在销毁阶段执行的生命周期函数。

1.shouldComponentUpdate函数：是在组件从页面删除的时候被执行。

//当组件从页面中删除的时候执行
componentWillUnmount(){
    console.log('child - componentWillUnmount')
}

个人博客：Karma’s Blog
源码地址：传送门