React组件生命周期

React组件生命周期

组件的生命周期可分成三个状态：

Mounted->Update ->Unmounted

Mounted:React Components被render解析生成对应的DOM节点，并被插入浏览器的DOM结构的一个过程

Update：一个mounted的React Components被重新render的过程（这个重新渲染的过程并不是说相应的DOM结构就一定会发生改变，react会把这个Components的当前status和最近一次的state进行比较，只有当state确实发生改变并且影响到DOM结构的时候，react才会去改变对应的DOM结构）

Unmounted：一个mounted的React Components对应的DOM节点被从DOM结构中移除的这样一个过程



每一个状态React都封装了对应的hook函数

mounting阶段有两个hook函数：

componentWillMount Mounting前被调用，在客户端也在服务端

componentDidMount Mounted后被调用，只在客户端

另外，还有一个初始化component的state的函数：getInitialState()

props和state差异： props是通过组件调用方在组件调用时指定，props一旦指定了，在一般情况下是不会改变的，尤其是对于被调用组件来说，props的拥有者是其调用方；而state是私属于当前组件的，state值是可变的（setState方法），state值的每一次变化，都会导致component从当前状态进入updating阶段，从而重新render。

Updating阶段有两个hook函数：

componentWillUpdate Updating前被调用，组件接收到新的props或者state但还没有render。在初始化时不会被调用。

componentDidUpdate 组件完成更新后立即调用。在初始化时不会被调用。

其次，还有另外两个函数：

componentWillReceiveProps() 当一个Mounted的component将要接受新的props时这个函数会被调用，其函数参数就是新的props对象

shouldComponentUpdate() 返回一个布尔值。当一个Mounted的component已经接收到新的props和state后判断是否有必要更新到DOM结构，这个函数的参数有两个，第一个函数参数是新的props对象，第二个参数是新的state对象，返回true表示更新

UNmounted阶段有一个hook函数：

componentWillUnmount() 在组件从 DOM 中移除的时候立刻被调用。在这个函数里可以执行一些cleanup()操作，比如释放内存资源，图片资源等。