浅谈React的生命周期

上一篇文章是浅谈了一下React的V-DOM结构，而本篇文章继续浅谈一下React的生命周期。
对于接触过React的开发者来说，生命周期这个名词一般不会很陌生。生命周期就是组件在从无到有这段时间内所经历的一系列阶段，这有点像高中生物书上所写的有丝分裂中几个阶段一样。

- React的生命周期
组件：在React中组件其实就是一个有限状态机，通过方法（生命周期，自定义函数），状态来管理，控制，改变V-DOM；
在React源码里面，组件有三种状态，分别是Mounting，Receive_Props，unMounting这三种状态，而它们和生命周期之间的关系如下图所示：

生命周期函数其实就是在某个函数中，指定的内部函数按照特定顺序依次实行，就形成了生命周期的现象，如图中所示。而在开发中经常会用到挂载和更新，所以下面会详细的介绍一下这两种状态的内部流程。

1. Mounting状态：

当组件处于挂载的阶段，就会执行mountComponent这个方法，该方法的大致流程如下：

从图中可以看出，mountComponent方法中其实是包含了几个生命周期：componentWillMount和componentDidMount；在这个过程中要注意几件事：

1）. 在挂载时，组件中最新的state状态只能在render调用过程中和调用后才能访问到；
2）. componentWillMount中调用setState不会触发二次渲染，因为在该方法中调用，只会讲partState放在pendingStateQueue中，只有在render调用时才将最新的state合并到组件的state中；
3）. componentDidMount中调用setState，这是会触发二次渲染。

2. Receive_Prop状态：
该状态是表示组件需要更新状态，在React内部，是通过调用receiveComponent来间接调用updateComponent，大致流程如下：

在React的渲染更新中，有一个方法是必不可少的，那就是setState，该方法是引发组件重新渲染的重要途径。

众所周知，setState是一个异步的方法，那是因为需要先遍历整个组件，将需要更新的状态放在更新队列里面，遍历完然后再执行该队列，最后再执行setState中的callback函数，因此在开发中，会发现调用了setState后立即访问this.state的状态还是旧的。

从源码中可以清晰的看出setState主要由两部分组成：enqueueSetState和enqueueCallback这两个方法构成；前者是更新state用，后者则是更新后执行对应的callback用的。

在更新组件时有一点要千万注意：切记不要在componentWillUpdate和shouldComponentUpdate这两个生命周期中调用setState，这样会导致渲染机制死循环，浏览器会崩坏。

以上就是博主对React生命周期的一些研究，如有不对的地方，请指出。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!