浅谈React的生命周期

前端之家收集整理的这篇文章主要介绍了浅谈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生命周期的一些研究,如有不对的地方,请指出。

原文链接:https://www.f2er.com/react/301904.html

猜你在找的React相关文章