大家好，我是Kason。相信很多关注React的朋友都知道ConcurrentMode，它是React渐进升级策略的产物。既然是策略，那是可以调整的。不，根据并发模式发生了什么？[1]，v18中不会有ConcurrentMode。这篇文章让我们了解了React渐进升级策略的演变过程。新旧React架构的区别可以认为，在采用Fiber架构之前的React只支持一种优先级：同步优先级，即所有的更新都是“同步不可中断”的形式。采用Fiber架构后，React支持包括同步优先级在内的多种优先级，或者说新架构支持并发更新。因此，新架构可以模拟旧架构的运行机制（即不开启并发更新）。当新架构开启并发更新后，可以使用React设计的并发特性（ConcurrentFeature）来解决CPU瓶颈和IO瓶颈，比如：useDeferredValueuseTransition全特性的SuspenseReact所有版本都可以。当前所有React版本都必须属于以下情况之一：v15之后的新架构和v16之前的旧架构不开启并发更新，与case1的行为一致，v16之后的新架构不开启并发更新,但启用了一些新功能（如自动批处理）v16之后的新架构中，默认启用并发更新v16和v17属于情况2。之所以分成多个case，是因为React在case4中的一些行为与case1、2、3不同（比如一些以componentWill开头的生命周期函数的调用时机发生了变化），也就是说，启用并发更新可能会导致旧代码不兼容。为了让开发者能够平滑过渡，React团队采用了“渐进式升级”的方案。早期的增量升级策略v16.3增加了StrictMode，提醒开发者编写“不符合并发更新规范的代码”，逐步引导开发者编写规范的代码。此时React团队的“渐进升级”策略是让页面中同时存在三种模式的应用，如下：Legacy模式，通过ReactDOM.render(,rootNode)创建的应用遵循这种模式。StrictMode默认关闭，其行为与Case2阻塞模式相同。通过ReactDOM.createBlockingRoot(rootNode).render()创建的应用程序遵循此模式作为从Legacy到Concurrent的中间模式。默认情况下启用StrictMode，其行为与Case3并发模式相同。通过ReactDOM.createRoot(rootNode).render()创建的应用程序遵循这种模式。默认启用StrictMode，性能与案例4相同。比较三种模式的可用功能。在v17之前，大多数事件都会冒泡到HTML元素。为了让同一个页面下的不同应用相互独立。v17之后，事件会向上冒泡到应用所在的根元素。因此，v17也被称为“垫脚石”版本，为“开启并发更新”做铺垫。当前的增量升级策略然而，根据社区的反馈，React团队意识到当前的“渐进升级”策略存在问题。这三种模式会影响整个应用程序。从Legacy升级到Blocking后，由于启用了StrictMode，会报整个应用的“并发不兼容警告”。从这个角度看，“逐步升级”的目的并没有达到。另一方面，由于使用了并发特性，开发人员从新架构中获益更多。由于新架构支持“切换并发更新”，使用并发特性后完全可以开启并发更新。这样，您只需要在“使用并发特性的组件”部分启用StrictMode即可。与划分三种模式相比，这种以“是否使用并发特性”作为是否开启并发更新的依据，更符合“渐进升级”中的“渐进”理念。所以在v18中，不再有三种模式，统一使用ReactDOM.createRoot(rootNode).render()来创建应用。不使用并发特性时，行为如案例3。使用并发特性后，性能如案例4。总结一句话：v18之后，只有并发特性，没有并发模式。作为一个已经发展了8年的前端框架，注定很难推动社区完成颠覆性的迭代升级。我们也看到React团队在这方面确实付出了很多努力。我想问问大家，你还能学吗？参考[1]并发模式怎么了？：https://github.com/reactwg/react-18/discussions/64
