React之生命周期

哈喽，这是我的第一篇博客，请大家多多关照~

追根溯源：What's the lifeCycle?

生命周期函数指在某一时刻组件会自动调用执行的函数；

React生命周期概览：

接下来我们就着生命周期的概念（抠字眼：某一时刻    自动调用执行）来深入理解一下React；

render生命周期我们需要单独拎出来理解，因为触发到它的地方会比较多；render函数记住如下两点，就很好理解了：

①.当组件的 props 和 state 发生变化时，render函数重新执行；

②.当父组件的render函数被运行时，它的子组件的render函数都将被重新执行；

Initialization(setup props and state)：React 中的初始化亦即 constructor ，固定写法如下： super(props) 主要用于继承；

那么constructor算不算是React的生命周期呢，其实严格意义上来说是算不上的。因为constructor是ES6的特性，并非React所私有，所以严格意义上讲是不属于React的生命周期的；

Mounting(DOM挂载，首先我们明确一个问题，DOM挂载只会在页面初次渲染的时候调用)；

componentWillMount:见名知意，该周期函数是 在DOM元素即将挂载到页面的时候 自动调用执行；

render：在页面初次渲染的时候也会调用render函数，调用时间段在 componentWillMount  之后，componentDidMount之前；

componentDidMount：见名知意，该周期函数是在 DoM元素挂载到页面的时候 自动调用执行；

Updation（更新）：更新分为两种情况，一种是 props 发生变化，一种是 state 发生变化；下面先分享一下props和state公有的生命周期：

shouldComponentUpdate：组件被更新之前会被自动执行，要求返回布尔值（true or false），见名知意，询问组件是否要更新，如果返回结果为true，则继续更新，如果返回结果为false，则不再往下执行了；

componentWillUpdate:组件在更新之前并且在shouldComponentUpdate返回值为true时自动调用执行；

render：有更新，符合render重新渲染条件，则此时会重新渲染一遍；

componentDidUpdate：组件更新完成之后自动调用执行；

上述 shouldComponentUpdate，componentWillUpdate，componentDidUpdate 为 props和state 改变时公有的生命周期；然后在 props 发生变化时，还有一个独有的更新相关的生命周期：

componentWillReceiveProps：对于这个生命周期呢，见名知意，此生命周期跟props息息相关，那么跟props息息相关的就只有子组件了，关于它，有两种描述，便于理解：

①.当一个组件从父组件接收了参数，只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行；

②.换言之，如果此组件初次存在父组件中，该生命周期函数不会被执行，当第二次出现在父组件中时才会执行；

Unmounting（组件即将要从页面剔除的时候）：

componentWillUnmount：当这个组件即将被从页面中剔除的时候，会自动调用执行；在被移除的一瞬间；（child componentWillUnmount）；