react的生命周期钩子函数

首先我们先来掌握基本单词

掌握单词后会更好理解和记住生命周期：

constructor ------构造函数

component ------组件

will ------将要

get ------得到

default ------默认值

initial ------最初的

unsafe ------不安全的

static ------静态的

derived ------衍生的

should ------应该

update ------更新

unmount ------取消挂载

receive ------收到

总体分为三个阶段：

1.组件挂载

(1)constructor

可以理解为组件的第一个生命周期，一般会在这里初始化组件的内部状态(state)，如果在这里面要使用this则必须在super()之后，如果在这里面需要使用props，那么需要把props作为参数传入。

在使用React.createClass()这种方式创建组件的时期，会有俩个生命周期：

getDefaultProps()

设置默认的props，也可以用defaultProps设置组件的默认属性。

//直接使用static defaultProps = {}这种方式来创建

getInitialState()

在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props

// 现在这个已经直接在constructor里使用this.state = {}这种方式来创建

(2)componentWillMount ------------ 17版本即将废除

组件将要挂载，这个生命周期基本上没有什么用，而且react*17版本之后废弃。

如果还想继续使用，可以使用UNSAFE_componentWillMount来代替。

这个生命周期，是除了初始化之外，唯一一个能够直接同步修改state的地方。

(3)static getDerivedStateFromProps

设置了这个生命周期就不能设置componentWillMount()

这是react16.3之后新增的一个生命周期，这是一个静态方法，静态方法没有this所以不能使用setState，需要return一个对象，这个对象就相当于setState里面的参数。

常用于强制性的根据props来设置state

(4)render

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

这里是合成虚拟DOM，可以理解为，在这里实际上都还没有真实的dom。

(5)componentDidMount ajax请求生成DOM**********

渲染真实的DOM浏览器，在这里才可以得到DOM。这个生命周期就是相当重要的一个生命周期，ajax请求一般都在这里进行。

2.组建更新

分为俩种情况，state改变和props改变

如果state改变，会直接进行到组件更新的第二个shouldComponentUpdate,如果是props改变，会先走componentWillReceiveProps。

(1)componentWillReceiveProps -----17版本即将废除

16.4之前，由于在更新阶段，没有static getDeriveStateFromProps这个生命周期，如果有根据props来生成的state，就需要在这里重新设置一次。因为之前是在constructor里面根据props来初始化的state，constructor只会执行一次，所以要在componentWillReceiveProps来修正state。在新的版本里，static getDerivedStateFromProps这个生命周期不管是在装载还是更新的时候都会触发。因此，componentWillReceiveProps也只会工作到react17.

(2)shouldComponentUpdate 性能优化*

这个生命周期用于react的性能优化，接收俩个参数(nextProps,nextState)通常会根据这俩个参数和this.state,this.props来进行diff算法对比，根据比较的结果来return true或者false,如果return的是false，将不会再执行后面的生命周期。

(3)componentWillUpdate -----17版本即将废除

没什么卵用

(4)render

和mount阶段一样，生成虚拟DOM

(5)componentDidUpdate

同componentDidMount。

3.组件销毁

(1)componentWillUnmount

组件将要销毁，这里一般可以用来清理定时器，解绑某些事件。