(四)React生命周期

生命周期

不同的事物都会有属于自己的生命周期, 而生命周期是指从创建开始，到销毁为止，所经历的整个过程.

组件的生命周期

组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，组件会调用指定的一些组件方法.

1. 组件的挂载, 组件被渲染到dom上的过程
2. 组件的更新, 当组件的数据,状态等发生改变后,进行重新渲染的一个一个过程
3. 组件的卸载, 当不使用组件时则需要将组件从都没中移除的过程

React的生命周期

React的生命周期描述

React也有属于其自己的一套生命周期, 在不同的周期执行不同的函数则为生命周期函数

React中主要有类组件和函数组件, 而函数组件是没有生命周期的, 故以下的生命周期函数主要是针对类组件

React的生命周期方法

生命周期最直观的就是生命周期图谱, React提供了两张图, 一种是常用的周期图谱, 一种是包含不常用的

生命周期图谱: projects.wojtekmaj.pl/react-lifec…

常用的生命周期

1. constructor
   1. 如果不需要初始化state的数值的话, 类组件会默认实现构造方法
   2. 主要的功能就是为初始化state的值和为组件绑定实例(this)
2. componentDidMount
   1. 在组件被挂载到dom后会立即调用
   2. 通常在当前生命周期中执行依赖dom的操作以及对接口数据的请求等操作
3. componentDidUpdate
   1. 当数据发生更新后立即调用
   2. 通常在当前生命周期中对更新后的dom进行操作以及接口数据的请求
4. componentWillUnmount
   1. 在组件卸载及销毁后直接调用
   2. 在当前生命周期中执行一些清楚定时器, 订阅等操作

在React的组件中

1. 在组件的挂载过程中: 首先执行构造方法 ,然后调用render函数, 最后执行componentDidMount
2. 在组件的更新过程中: 先执行render函数, 然后执行componentDidUpdate
3. 在组件的销毁过程中: 直接执行componentWillUnmount

包含不常用的生命周期

以下生命周期方法并不太常用。它们偶尔会很方便，但是大部分情况下组件可能都不需要它们。

1. shouldComponentUpdate: 判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。
2. getDerivedStateFromProps: 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
3. getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息, 例如滚动组件之前滚动的高度;