前言:生命周期和setState,是react的基础组成部分,在我们日常开发中经常被使用。那么,究竟如何使用setState可以获得更优的性能?每个生命周期中setState又做了些什么?哪些生命周期不能使用setState,哪些可以使用,又怎么使用?这些是否思考过,又是否真正理解了呢?接下来,本文会分为两章,为你解答上面的一系列问题!
本文原创,转载声明!!
第一章: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会直接触发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之后,统一处理的。
具体的执行顺序,可以根据上图清晰梳理,本文到此,谢谢!