React渲染顺序及useEffect执行顺序探究（含并发模式）

前言

在不借助任何演示的情况下，你能清楚地说出 React 组件的渲染顺序以及 useEffect 的执行顺序吗？你知道 React18 『并发模式』下执行情况是不同的吗？ 下面就让我们一起来看一看吧～

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执行顺序探究的全部内容了，如果你喜欢本文或者有收获的话，不妨点一个👍吧～你的支持和鼓励是博主更新的最大动力，多谢多谢！