前言：生命周期和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之后，统一处理的。

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