React渲染顺序及useEffect执行顺序探究（含并发模式）_多个useeffect执行顺序_蚂蚁二娘的博客

React 16

先来看目前大部分人还在用的16或者17版本，也就是默认的渲染情况，我们来写一个 Demo ，这个 Demo 包含一个父组件（ App ），两个子组件（ SubApp ，互为兄弟组件），每个组件在 mount ， effect 和 clean 的时候打印自身信息。

SubApp.js 代码

App.js 代码

这里，我们在 App 组件下渲染两个连续的 SubApp 组件，一个叫 A ，一个叫 B ，来看执行结果。

由此，我们可以得出结论， 在 React16 中（重要！） ，

mount（挂载）的顺序是 父组件 -> 子组件
effect（副作用）的顺序是 子组件 -> 父组件 ，而在兄弟（同级）组件中，先渲染的会先执行

实际上，17也是这个顺序，那么我们来看看最新的 18 版本的情况是怎样的呢。

React 18

在代码完全不改变的情况下，我们会得到以下打印结果，

What! 竟然是完全一样的，为什么呢？因为我们在 index.js 里采用的渲染方法依旧是旧的方法， 在这种情况下，18的渲染模式和旧版本是没有区别的 ，下面，我们需要修改 index.js ，采用并发模式下的渲染方法。

最主要的修改是这一行，

import { createRoot } from "react-dom/client"; 
通过这个方法渲染出来的 App 将会使用并发模式（Concurrent Mode）来渲染 React 应用，这也是 React 18 最主要的更新，它将彻底改变 React 的核心流程。话不多说，我们来看看打印的结果， 
App mount ✖️2
A mount ✖️2
B mount ✖️2
A effect
B effect
App effect
A clean
B clean
App clean
A effect
B effect
App effect 
（结果太多，截图截不下了…） 
并发模式的情况实在太不同了，我们来一一梳理发生了什么， 
每一个组件都被 mount 了两次
子组件的 effet 首先执行，然后执行父组件的，这里顺序和之前没有不同
子组件的 clean 执行，然后父组件的 clean 也执行，顺序和 effect 执行顺序一致
子组件和父组件的 effect 再次执行，顺序保持不变 
为什么会有 clean 执行了，这是因为 React 18 并发模式下会强制让组件更新一次，也就是 clean->effect ，并且会先整体把所有组件清理一遍，再执行所有组件的副作用，而不是穿插着一个个组件交替执行，这是十分有趣的。 
好了，这就是本期React执行顺序探究的全部内容了，如果你喜欢本文或者有收获的话，不妨点一个👍吧～你的支持和鼓励是博主更新的最大动力，多谢多谢！
                    在不借助任何演示的情况下，你能清楚地说出 React 组件的渲染顺序以及 useEffect 的执行顺序吗？你知道 React18 『并发模式』下执行情况是不同的吗？ 下面就让我们一起来看一看吧～先来看目前大部分人还在用的16或者17版本，也就是默认的渲染情况，我们来写一个 Demo，这个 Demo 包含一个父组件（），两个子组件（，互为兄弟组件），每个组件在 ， 和  的时候打印自身信息。这里，我们在 App 组件下渲染两个连续的 SubApp 组件，一个叫，一个叫，来看执行结果。由此，我们可以得出结论，
				粗略理解为 useEffect 一个闭包函数，那么按照正常函数的逻辑来理解，那肯定是先子后父，再继续追问，为什么普通函数逻辑调用是先子后父，这个嘛，就得JavaScript的作者或者研究一下底层逻辑。
				今天写代码的时候，遇到了一个问题，该问题总结起来可以就是，一个函数组件中，有useLayoutEffect，有useEffect，useEffect中有卸载函数return，那么，在组件第一次加载的时候，useLayoutEffect、useEffect、useEffect.return的执行顺序是什么？组件更新的时候，执行顺序又是什么？
要弄清楚这个问题，需要去查阅官方文档，我们看看官方文档怎么说。
useLayoutEffect：
1.它会在所有的 DOM 变更之...