React生命周期及setState原理分析

前言:生命周期和setState,是react的基础组成部分,在我们日常开发中经常被使用。那么,究竟如何使用setState可以获得更优的性能?每个生命周期中setState又做了些什么?哪些生命周期不能使用setState,哪些可以使用,又怎么使用?这些是否思考过,又是否真正理解了呢?接下来,本文会分为两章,为你解答上面的一系列问题!

本文原创,转载声明!!

第一章:React生命周期


我们先通过一张图,来认识一下React生命周期的成员以及它们的执行流程:

react生命周期

React生命周期可以分为两条执行流程:

1、初始化:初始进入页面 → constructor → componentWillMount → render → componentDidMount → componentWillUnmount;

这里需要注意的是:componentWillMount中若使用setState,其state会被合并到初始数据当中。那么,react是怎么样处理合并的呢?为什么要这样处理呢?在componentDidMount中,state又是怎么处理的?本文会在下面讲解生命周期流程的部分,来解答说明。

2、更新:setState → componentWillReceiveProps → shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate → componentWillUnmount。

更新流程需要提到两点:一点是componentWillReceiveProps中使用setState,state会被收集储存起来,这里是区别于上面componentWillMount中state合并到初始数据中的。这里提一下:shouldComponentUpdate如果return => false,则不会执行更新(render)。


接下来,会对两条执行流程,进行详细说明;在这之前,我们先简单整理一下:上面说到一部分生命周期中state的处理方式,究竟是怎么样处理的呢?我们可以整合为以下两个问题:

1、每个生命周期中,怎样使用setState?使用过程中,state又是如何处理的呢?

2、每个生命周期中,setState都会开启更新流程么?如果不会,为什么?

让我们上面的问题,继续吧~接下来,会按照上面的两条执行流程分别进行说明:

注意!!文中会提到setState在生命周期的执行逻辑,细心的同学可能跟会问:多个setState在其中是如何处理的,与事件中有什么关系和区别?执行原理是什么样子的?这里说明一下,这章节首先分析生命周期的执行原理,setState会被提及,但是具体的setState原理,会在下一章节中详细给大家说明!!


一、初始化

这是上面初始化的分支,很明显下面的图中,加了一些的状态说明,提前说明一下:_compositeLifeCycleState翻译为:综合生命周期状态(下文简称:生命状态),它是生命周期中关键的状态,setState是否出发更新,就是依据它的状态,下面我们详细说明。


初始化详图

1、首先,进入页面,会初始化页面数据(state, props, context等…),等待备用;

2、然后,设置生命状态为:MOUNTING,这个状态下面会说明它的用途,这里我们先按照流程继续往下走;

3、接下来,在componentWillMount中,setState操作,只是把state合并到初始化状态中,而根本不会触发render在这里更新state,就等同于直接写在this.state中,所以,在此生命周期中的setState根本没有意义

4、执行到这里,生命状态 会被重置为 null,之后是渲染页面(即执行render);

5、最后,渲染完以后,执行componentDidMount,这里使用setState即会正常触发重新渲染了,更新state。(接下来,就是更新流程了!!)


二、更新(updateComponent)

图中,是setState发起更新流程,并不是每个生命周期中的setState都会触发跟新,它判断的依据就是 _compositeLifeCycleState ,上面说到的MOUNTING和下面将会讲到的RECEIVE_PROPS,在这两个状态下,react会处理setState为不会触发更新,相对的其他状态会正常更新;这也导致了一些生命周期中的使用情况,我们继续往下看吧。


更新详图

1、首先,react会比较前后元素、状态等是否不同,如果不同则正式发起更新;

2、然后,生命状态 被设置为RECEIVE_PROPS(注意:此时生命周期中,setState不会触发更新,而是会做其他处理);

3、接下来,componentWillReceiveProps中的setState就不会执行更新,而是合并挂载起来,等待render时统一更新;

4、到这里,生命状态 会重置为null;然后shouldComponentUpdate中会判断是否更新;之后是componentWillUpdate。

敲黑板了!!!!  shouldComponentUpdate和componentWillUpdate执行的时候,生命状态 已经被重置为null,在它们里面的setState会触发更新,那么在其间使用呢?会造成什么?答案就是:在一个更新周期还没有render之前,再次发起updateComponent,直接导致递归更新,死循环!相信我!等待你的,就是浏览器崩溃!!所以在他们里面🚫禁止🚫使用setState。

5、最后,渲染页面;再执行componentDidUpdate;它里面执行setState,会触发更新,不同的是render完成之后再发起的reRender。虽然这儿区别于上面两个生命周期中使用的情况,但是会一遍一遍的更新,这肯定也是不合理的,所以需要有条件的使用setState。

最后呢,简单介绍一下,退出页面的流程。此流程中, 首先生命状态也会被赋予值为UNMOUNTING, 然后执行componentWillUnmount,最后生命状态重置为null,做卸载页面组件和状态等处理。顺便提一下,在componentWillUnmount中使用setStat,因为等待的是页面卸载,所以改变state是没有意义的。

第一章总结:

生命周期中setState的使用情况:

    无意义使用:componentWillMount,componentWillUnmount;

    有条件使用:componentDidUpdate;

    禁止使用:componentWillUpdate,shouldComponentUpdate;

    正常使用:componentWIllReceiveProps,componentDidMount。

生命周期中setState是否触发更新:

    componentWillMount和componentWillReceiveProps中,setState会被react内部处理,而不触发render;

    其他生命周期均正常出发更新渲染。


第二章:setState原理分析


上面提到了生命周期中使用setState,那么多个setState是如何处理的?在生命周期中是如何处理state和callback的?在React事件中又是怎么处理的?别着急,我们接下来继续讲解~

setState的执行原理,可以分为两类:

1、批量更新类:即react内部的执行函数,执行setState的执行逻辑,都是批量更新处理,其中包括:react内部事件(合成事件)和生命周期;

2、非批量更新类:即上面两种情况以外的情况,经常见到的:原生事件、setTimeout、fetch等等;

再讲解之前,先说明两个概念:

1、事务:可以理解为,一个正常的函数外层又被包裹了一层。这层包裹处理,包括一个或多个的函数执行前的处理函数(initialize函数)、一个和多个函数执行后的处理函数(close函数);React很多的逻辑处理,都使用了事务的概念;

2、合成事件和原生事件的关系和区别:

区别:原生事件就是addEventListener写法的事件!而合成事件,就是直接书写react中的onClick、onChange等;

关系:合成事件可以理解为react对原生事件的包裹封装;原生事件相当于上面事务概念中的正常的函数,而经过包装处理形成的事务,就是react中的合成事件。

接下来我们正式开始说明setState的内部执行逻辑!!

事实上,每个setState都是会直接触发render更新的。只是react经过内部处理,让它在一些情况下不会触发render(生命周期已说明);还有一些情况,就是同事存在多个setState的时候,不是每个setState都会触发,而是将state统一收集起来,进行统一render处理。

清晰了以上概念,接下来用合成事件和原生事件来对比说明,先举个栗子:


原生事件
原生事件函数

上面是原生事件的栗子:两个setState,两个回调函数,两个console,会是什么样的执行顺序呢?

执行结果

那么,合成事件中执行同样的函数,又会是什么样的输出顺序呢?


合成事件函数
执行结果

上面两个栗子num初始值都是1,那么为什么输出顺序完全不一样呢?上图为敬:

下图中的状态这里说明一下:isBatchedUpdates是批量更新状态,通过修改它来开启和关闭批量更新;updateComponent函数内部执行的是上面生命周期的更新流程;


setState流程图

原生事件中,setState会直接触发render更新,所以栗子在原生事件中的执行顺序是,先render然后执行callback,setState事务执行完毕,然后执行打印。打印拿到的就是setState更新之后的状态,以此类推,所以出现了上面原生事件的打印顺序,这就很明了了。

而合成事件则不然,它直接发起事务1,在函数执行之前开始批量更新状态(isBatchedUpdates为true,默认值是false!),开启之后,执行合成事件中的setState,此时处于批量更新状态,这时setState不会触发render更新,而是做了两件事情:收集state和callback。这里我贴上几行源码,有助于理解:


批量更新源码

默认批量更新是处于关闭的状态,那么会直接执行batchedUpdates(此函数就是更新渲染函数)。这里就是批量更新状态是否开启的分叉口:当开启批量更新时,则是把状态push到数组(dirtyComponents)中。那么收集完成,在哪里处理呢?我们继续往下看。

依照上面的流程图,收集完状态以后,执行事务的close函数,它里面做了些什么呢?一个是关闭批量更新状态,一个是正式发起对收集的状态的处理,这里又开启了一个新事务:即事务2。事务2,经过复杂的处理,处理更新了收集的state,也就是dirtyComponents。处理完以后,执行事务2的close函数,它重置了整个更新的状态,也是在这里处理执行事务1中收集的callback;

让我们回头看看上面的栗子

setState只是收集了state和callback,并没有做其他处理,然后直接执行了下面的console,所以!!这时的num一定是初始值1,然后下面继续收集,再下面console还是1;

当收集完以后,render!!

最后处理callback,也就执行了callback里面的console。

到这里在两种执行场景下面的setState的执行逻辑就完全讲完了。这里说到了一些源码,但只是顺着setState这条线进行了分析说明,欢迎同学们更深层次的研究!

最后,总结一下setState:

1、setState的执行,分为两大类:一类是生命周期和合成函数;一类是非前面的两种情况;

2、两种类型下,setState都是同步执行,只是在批量更新类中,state和callback被收集起来延迟处理了,可以理解为数据的异步执行;而非批量更新类中的setState直接触发更新渲染。

3、callback与state同时收集,处理是在render之后,统一处理的。

具体的执行顺序,可以根据上图清晰梳理,本文到此,谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容