没有任何演示，您能清楚地说React组件的渲染顺序和使用效率的执行顺序吗？您知道React18“并发模式”的执行是不同的吗？让我们一起看看?
让我们看一下大多数人仍在使用的16个或17个版本，即默认渲染情况
让我们写一个演示。该演示包含一个parent component（），两个子组件（，彼此的兄弟组件），每个组件在时间内打印。
subapp.js代码app.js代码
在这里，我们在应用程序组件下渲染了两个连续的subapp组件，一个呼叫和一个来查看执行结果。
由此，我们可以得出结论，在React16（重要！）中，
实际上，17也是该顺序，所以让我们看一下最新的18个版本。
如果代码完全不变，我们将获得以下打印结果，
什么！事实证明它完全相同，为什么？因为我们在其中使用的渲染方法仍然是一种旧方法。在这种情况下，18和旧版本的渲染模式之间没有区别。下面，我们需要在并发模式下修改并采用渲染方法。
主要修改是这条线，
通过此方法渲染的应用程序将使用并发模式呈现React应用程序。这也是React 18的最重要更新，它将完全改变React的核心过程。不用说，让我们看一下打印的结果，
（结果太多了，屏幕截图无法剪切...）
并发模式的情况太差异了。一一发生的事情，一个一个人发生的事情，
为什么执行？这是因为React 18并发模式将被迫进行一次组件更新一次，也就是说，整个组件将整体清理，然后将执行所有组件的副作用，而不是每个组件的中断交替执行。这很有趣。
好吧，这是React执行顺序的所有内容。如果您喜欢这篇文章或有收益，那么您不妨单击一篇？您的支持和鼓励是博客作者更新的最大动力。谢谢你！
React 16：https：//codesandbox.io/s/react16-渲染-cwiqz
反应18
原始：https：//juejin.cn/post/7094651577117442056