很多的事物都有从创建到销毁的整个过程，这个过程称为生命周期。
React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能。
官方文档中有这么一段例子：
- 当Clock组件第一次被渲染到DOM中的时候，就为其设置一个计时器。这在React中被称为“挂载(mount)”。
- 当DOM中clock组件被删除的时候，就应该清除计时器。这在React中被称为“卸载(unmount)”。
组件的生命周期主要分为以下3个阶段：
- 挂载阶段，组件第一次在DOM树中被渲染的过程
- 更新阶段，组件状态发生变化，重新更新渲染的过程
- 卸载阶段，组件从DOM树被移除的过程
上述的3个阶段又对应几个生命周期函数。
常用的生命周期函数
我们可以借助生命周期图谱来了解组件的生命周期：
挂载
组件挂载时，其生命周期函数调用顺序是 constructor()、render()、componentDidMount()
下面有一个父子组件的例子，通过按钮来显示隐藏子组件：
constructor()
-
如果不初始化state或不进行方法绑定this，可以不需要构造函数。
-
constructor()中通常只做两件事：
- 初始化组件内部的状态state
- 为事件绑定实例(this)
componentDidMount()
-
componentDidMount()会在组件挂载后立即调用。
-
在这个函数中通常进行哪些操作呢？
- 依赖于DOM的操作可以在这里进行
- 在此处发送网络请求（官方建议）
- 在此处添加一些订阅
更新
组件中的数据更新时，其生命周期函数调用顺序是 render()、componentDidUpdate()
componentDidUpdate()
-
componentDidUpdate()会在更新后被立即调用，首次渲染不会执行此方法。
-
在这个函数中通常进行哪些操作呢？
- 当组件更新后，可以在此处对DOM进行操作
- 如果对更新前后的props进行了比较，也可以选择在此处进行网络请求
卸载
组件被卸载时，调用的生命周期是componentWillUnmount()
componentWillUnmount()
-
componentWillUnmount()会在组件卸载之前直接调用
- 在此方法中执行必要的清理操作
- 清除定时器，取消网络请求或清除在componentDidMount()中创建的订阅。
除了上面介绍的生命周期函数之外，还有一些不常用的生命周期函数：
其实组件更新是调用的生命周期函数应该是shouldComponentUpdate()、render()、getSnapshotBeforeUpdate()、componentDidUpdate()
shouldComponentUpdate()
- 当props或者state发生变化时，shouldComponentUpdate()会在渲染执行之前被调用，返回值默认为true。
- 该函数接受两个参数nextProps和nextState，我们可以将this.props与nextProps以及this.state和nextState进行比较，来决定是不是要更新。
- 此方法仅作为性能优化的方式而存在。
import React, { Component } from "react";
export default class Home extends Component{
// ...
shouldComponentUpdate(nextProps,nextState){
console.log('shouldComponentUpdate被调用了',nextProps,this.props,nextState,this.state);
return true;
}
// ...
}
getSnapshotBeforeUpdate()
- 此方法的任何返回值将作为第三个参数传递给componentDidUpdate()
- 组件在发生更改之前从DOM获取一些信息（例如，滚动位置）
- 此方法并不常见
另外，React中还有一些过时的生命周期函数，后面的版本随时可能删除，应该避免使用它们。
