React：详解生命周期函数-v16.0前的生命周期函数

最近项目在使用React，所以准备写一些关于react的博文，方便学习和巩固。

本文将会详细讲述react的生命周期函数，react在v16版本后对生命周期函数进行了较大的更新，但大部分团队不见得会跟进升到16版本，所以16前的生命周期还是很有必要掌握的，并且16版本也是基于之前的进行修改。

React v16.0前的生命周期函数

组件的初始化(initialization)阶段

第一个阶段可以称为是组件的初始化阶段，在这个时候会执行constructor方法，constructor接收两个参数props和content，可以获得从父组件传下来的props和context，如果你想在constructor构造函数内部使用props和context，则需要调用super方法。

调用super(props)方法将父组件的props注入给子组件，供子组件读取(组件中props只读不可变，state可变)，在constructor中可以做一些组件的初始化工作，如定义this.state的初始内容，也可以进行AJAX网路请求。

注意：在继承类中的构造函数必须调用 super（...），并且在使用 this 之前执行它。

import React, { Component } from 'react';

class React extends Component {
  constructor(props) {
    super(props);
  }
}

组件的挂载(Mounting)阶段

此阶段中有componentWillMount，render，componentDidMount三个函数

• componentWillMount：

它在组件挂载到DOM前调用，且只会被调用一次，在这个函数里调用this.setState不会引起组件的死循环赋值，我们可以把写在这里边的代码提前到constructor()中，所以项目中很少用。所以在react v16.3版本中被移除了。

• render：

函数会返回一个符合JSX语法的react元素，用来描述一个UI组件，render不负责组件的实际渲染工作，之后由react自身根据此元素去渲染出页面DOM。

它可以接受props和state来完成数据的渲染，react中所有的页面刷新都是基于state的，也就是说只要state发生重传递、重赋值，无论值是否有变化，都会触发组件的刷新。这就是react组件的更新机制。

render是一个纯函数（Pure function：如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数）

注意：不能在render里执行this.setState方法，不然会导致数据的死循环设置。

• componentDidMount：

组件挂载到DOM后调用，且只会被调用一次。在实际开发中,最适合在componentDidMount函数中去请求数据,其中最重要原因:使用componentDidMount第一个好处就是这个一定是在组件初始化完成之后,才会请求数据,因此不会报什么警告或者错误,我们正常请教数据完成之后一般都会执行this.setState，而在这里不会造成数据设置死循环。

组件的更新(update)阶段

此阶段中有componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，componentDidUpdate三个函数。

• componentWillReceiveProps(nextProps)

当从父组件传入的props改变时，在引起组件更新之前会调用这个函数，它的参数nextProps是父组件传给当前组件的新props。

但父组件的render方法被调用时，不能保证重新传给当前组件的props是有变化的，所以可以在此方法中根据nextProps和this.props来判断重传的props是否改变，以及如果改变了要执行什么东西，比如根据新的props调用this.setState触发当前组件的重新render。

注意：官方不建议在此执行this.setState

• shouldComponentUpdate(nextProps, nextState)

此方法的两个参数nextProps, nextState是将要改变的属性、状态的对象，它通过判断当前的props、state和将要改变的props、state是否相同，来返回一个布尔值，当返回true时则继续往下继续执行组件更新过程，返回false则停止当前组件更新。在diff算法的 element diff 中，推荐使用此方法来减少组件的不必要渲染，优化组件性能。

注意：如果在componentWillReceiveProps方法中执行了this.setState，更新了state，但在render前（如shouldComponentUpdate，componentWillUpdate），this.state依然是指向更新前的state，不然nextState及当前组件的this.state的对比就一直是true了。

• componentWillUpdate(nextProps, nextState)

此方法接收的两个参数仍然是是将要改变的属性、状态的对象，在这边可执行一些组件更新发生前的工作，一般较少用到。

注意：不能在这个函数里使用this.setState，不然会死循环设置数据，导致栈溢出。在react v16.3版本移除了此方法。

• componentDidUpdate(prevProps,prevState,snapshot)

此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state。其中 snapshot 参数指的是在新版 react 生命周期函数中，从 getSnapshotBeforeUpdate 函数返回的值。

组件的卸载(unmouting)阶段

此阶段只有一个生命周期方法：componentWillUnmount

此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

参考资料：

详解React生命周期(包括react16版)