react生命周期钩子函数

在react中，对于每一次由状态改变导致视图改变的操作，都会经历两个阶段：render和commit阶段。

只有在类组件中才有生命周期，因为类组件会创建对应的实例；而函数组件不会。

生命周期：组件实例从被闯进啊到被销毁的过程成为组件的生命周期。

由class组件创建的实例是具有生命周期的，它的render函数就在render阶段执行，并且内部的diff算法会自动计算哪个DOM发生变化进而去操作。在commit阶段将对应的DOM节点提交到视图上完成显示。

render()阶段

render阶段会执行很多钩子函数，例如：在首次渲染时执行constructor，getDerivedStateFromProps，componentWillMount,render

在执行更新时：componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render

在渲染阶段如果捕捉到了组件中的错误，则会执行getDerivedStateFromError

接下来说说每个调用时期与作用。

constructor

该方法只会调用一次，所以可以实现this的一次性绑定。

在初始化阶段，可以This.state为状态赋值，也可以设置一些静态的数据。

componentWillReceiveProps(旧的)

如果组件接收到了新的props，则会第一时间触发这个函数。

在首次渲染组件的时候不会调用此生命周期钩子函数；使用this.setState()也不会触发此生命周期钩子函数。

但，如果是父组件渲染导致自组件的重新渲染，即使传给子组件的props没变，该组件中的这个生命周期函数也会被调用。

我们一般不使用该函数。

getDerivedStateFromProps(新的)

它是一个静态方法，会接受props和state两个参数。他会在调用render方法之前被调用。无论是初始render还是gengxinrender都会触发它。

像他的名字一样，可以从props中获取衍生的state。它的调用时机和 componentWillMount、componentWillUpdate、componentWillReceiveProps 一样都是在 render 方法被调用之前，它可以作为 componentWillMo