React教程（五）——生命周期函数

生命周期函数，是react框架的难点内容，你要知道，每一个生命周期函数是干什么的？它们的使用场景是什么？当某一种条件下，它们有着怎样的执行顺序？每一个生命周期函数，应该注意的点是什么？

react中，周期函数主要有九个：

函数名	作用描述
constructor	定义页面的状态，仅初始化的时候调用一次
componentWillMount	组件挂载之前调用，全程只调用一次
render	组件进行渲染dom的周期函数，渲染期间不能进行setState。
componentDidMount	组件挂载之后调用，全程只调用一次，通常进行一些数据请求加载的操作
shouldComponentUpdate	决定组件是否更新的周期函数，当你需要做react性能优化的时候，需要用到它
componentWillUpdate	组件更新之前调用，全程会多次被调用，当发生setState或者组件接收props的时候
componentWillReciveProps	组件接收props的时候调用此周期函数，可以进行setState或者其他一些操作
componentDidUpdate	组件更新之后调用此周期函数
componentWillUnmount	组件销毁之前调用，一般进行定时器的清除，绑定事件的解除等等

生命周期函数的执行顺序

1、初始化的时候，生命周期函数是这样执行的。

constructor——>componentWillMount——>render——>componentDidMount

2、如果执行setState函数，生命周期函数的执行顺序又是这样的。

shouldComponentUpdate——>componentWillUpdate——>render——componentDidUpdate

3、父元素向子组件传递props的时候

componentWillReciveProps——>componentWillUpdate——>render——componentDidUpdate

关于生命周期函数的使用场景

一般而言，每个页面中，我们需要进行数据请求，比如要渲染一个列表，获取这个列表的数据，一般需要在componentDidMount中进行。

有时候，进行setState之后，这个state和页面的展示是无关的，我们要进行一些性能优化，让组件不再重新渲染，这个时候，可能要使用shouldComponentUpdate周期函数。

有时候，我们在组件的生命周期函数中，开启了一个定时器，比如setInterval、setTimeout，我们在组件销毁的时候，需要清除这个定时器。这个时候用到的周期函数叫componentWillUnmount。

我们在父组件中，想要通知子组件干一些事，比如调用某个方法。我们需要通知给子元素，那通常的方式就是传递一个props。这个时候我们可能需要componentWillReciveProps来实现。