前言
在不借助任何演示的情况下，你能清楚地说出 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 ✖️2A mount ✖️2B mount ✖️2A effectB effectApp effectA cleanB cleanApp cleanA effectB effectApp effect
（结果太多，截图截不下了..）
并发模式的情况实在太不同了，我们来一一梳理发生了什么，
每一个组件都被 mount 了两次
子组件的 effet 首先执行，然后执行父组件的，这里顺序和之前没有不同
子组件的 clean 执行，然后父组件的 clean 也执行，顺序和 effect 执行顺序一致
子组件和父组件的 effect 再次执行，顺序保持不变
为什么会有 clean 执行了，这是因为 React 18 并发模式下会强制让组件更新一次，也就是 clean->effect ，并且会先整体把所有组件清理一遍，再执行所有组件的副作用，而不是穿插着一个个组件交替执行，这是十分有趣的。
好了，这就是本期React执行顺序探究的全部内容了，如果你喜欢本文或者有收获的话，不妨点一个?吧～你的支持和鼓励是博主更新的最大动力，多谢多谢！
在线Demo地址
React 16: https://codesandbox.io/s/react16-render-1cwiqz React 18（并发）：https://codesandbox.io/s/react18-render-uzmekn
原文：https://juejin.cn/post/7094651577117442056