React组件的生命周期

1. 组件生命周期概述

• 什么是组件的生命周期？

组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程，这个过程就叫做组件的生命周期。react在组件的生命周期中提供了一系统的钩子函数，可以让开发者在函数中注入代码，这些代码会在适当的时候运行。为开发人员在不同阶段操作组件提供了时机。

注意：只有类组件才有生命周期。函数组件每次都是重新运行函数，旧的组件即刻被销毁

• 组件的生命周期主要包括哪几个阶段？

组件的生命周期可以被分为3个阶段：挂载阶段、更新阶段、卸载阶段

以react旧的生命周期为例介绍：

2. 挂载阶段

• 在这个阶段，组件被创建，执行初始化，并被挂载到DOM中，完成组件的第一次渲染
• 在组件的挂载阶段，依次执行的钩子函数：（react旧的生命周期）

1. constructor()

2. componentWillMount()

3. render()

4. componentDidMount()

• constructor()

1. constructor()是ES6中class的构造方法，组件被创建时会首先调用组件的构造方法

2. constructor()的作用是初始化state，以及为事件处理程序绑定this

• componentWillMount()（已经废用了，是在组件被挂载在DOM之前调用，而且只会被调用一次）

• render()

1. render()方法中，根据组件的props和state返回一个React元素，用于描述组件的UI，通常React元素使用JSX语法定义，实际上是调用React.creatElement()（JSX仅仅是createElement方法的语法糖，JSX语法被@babel/preset-react插件编译为creatElement方法，然后生成一个react元素）

2. render()方法的作用是渲染UI

3. 注意：在render()里面不能调用setState()

•  componentDidMount()

1. componentDidMount()是在组件被挂载在DOM之后调用，而且只会被调用一次。这个时候已经获取到了DOM结构，因此依赖DOM节点的操作就可以放在这个方法里面去实现。（在这一阶段，虚拟DOM已经挂载到了页面上成为了真实DOM）

2. 可以调用setState()

3. componentDidMount()方法的作用是：向服务器端发送网络请求，以及处理依赖DOM节点的操作

3. 更新阶段

• 组件被挂载到DOM之后，props和state都可以引起组件的更新。props引起的组件更新，本质上是由渲染该组件的父组件引起的，无论props是否改变，当父组件的render()方法每一次被调用时，都会导致组件的更新。State引起的组件更新，则是通过调用this.setState()修改组件的state来触发的。因此，父组件调用render方法或者调用this.setState都会引起组件的更新
• 在更新阶段，依次执行的钩子函数为：（旧的生命周期）

1. componentWillReceiveProps()

2. shouldComponentUpdate()

3. componentWillUpdate()

4. render()

5. componentDidUpdate() 

•  componentWillReceiveProps()

已废用，只会在由props引起的组件更新过程中被调用，由state引起的组件更新并不会触发该方法的执行

• shouldComponentUpdate()

1. shouldComponentUpdate()用于决定组件是否继续执行更新过程，默认值为true，可以用来减少组件不必要的渲染，从而优化组件的性能

• componentDidUpdate() 

componentDidUpdate在组件更新之后被调用，可以作为操作更新后的DOM的地方。该方法的两个参数prevProps、prevState代表组件更新前的props和state。 

4. 卸载阶段 

在组件卸载阶段只有一个钩子函数，就是componentWillUnmount()，这个函数会在组件被卸载前调用，可以在这里执行 一些清理工作

react组件旧的生命周期过程可以参考下图：

 5. react组件新的生命周期

getSnapshotBeforeUpdate()这个函数的返回值会作为componentDidUpdate的第三个参数。

以上就是关于React组件的生命周期的介绍。