大家好，我是Kason。相信很多关注React进展的朋友都知道ConcurrentMode，它是一种渐进升级策略的产物。由于政策调整，根据Whathappenedtoconcurrentmode?，v18将没有ConcurrentMode。没有并发模式，如何使用并发更新？一句话总结：在v18中，不再有三种模式，而是以是否使用并发特性作为是否开启并发更新的依据。更详细的解释，让我们从React渐进升级策略的演进中寻找答案。欢迎加入人类优质前端框架群。飞飞React有几种架构？从最老的版本到现在的v18，React有多少个版本？可以从架构的角度来概括。目前有两种架构：StackReconciler（旧架构）以不间断递归方式更新，FiberReconciler（新架构）以可中断遍历方式更新。新架构可以选择是否开启并发更新，所以目前市面上的所有React版本都属于以下情况：老架构（v15及之前版本）新架构，不开启并发更新，行为符合情况1（v16和v17默认属于这种情况）新架构，不开启Concurrentupdates，但是开启了一些新特性（比如AutomaticBatching）。使用新架构，并发更新的理想与现实之间存在差距。React团队的愿景是：使用旧版本的开发者可以逐渐升级到新版本，即从情况1、2、3升级到情况4。但是中间有很大的阻力，因为React的一些行为以防万一4与案例1、2、3不同。例如，案例4中React中以下三个生命周期函数是“不安全的”：为了让开发者能够平滑过渡，React团队采用了渐进升级的方案。增量升级第一步增量升级解决方案的第一步是规范代码。v16.3新增StrictMode，提示开发者编写不符合并发更新规范的代码，逐步引导开发者编写规范的代码。例如使用上面的unsafe生命周期函数时，会产生如下错误信息：GradualupgradeStep2接下来React团队让不同情况下的React在同一个页面共存，这样情况4中的React就可以逐渐渗透进入原来有物品。具体做法是提供三种开发模式：Legacy模式，通过ReactDOM.render(,rootNode)创建的应用都遵循这种模式。StrictMode默认关闭，其行为与案例2Blocking模式相同。通过ReactDOM.createBlockingRoot(rootNode).render()创建的应用程序遵循此模式作为从Legacy到Concurrent的中间模式。StrictMode默认开启，与case3ConcurrentMode行为相同，ReactDOM.createRoot(rootNode).render()创建的应用程序遵循该模式，StrictMode默认开启，与ConcurrentMode相同case4.为了让不同模式的应用程序在同一个页面工作，需要调整一些底层来完成。例如：调整前，大部分事件会统一冒泡到HTML元素，调整后，事件会冒泡到应用的根元素。这些调整发生在v17，因此v17也被称为开启并发更新的垫脚石版本。最新的逐步升级策略时间提前到2021年6月8日，届时v18工作组成立。经过与社区的广泛沟通，React团队意识到目前的增量升级策略存在两个问题。原因1首先，由于模式影响整个应用，不可能在同一个应用中完成逐步升级。例如，开发者在应用中将ReactDOM.render修改为ReactDOM.createBlockingRoot，从Legacy模式切换到Blocking模式，会自动启用StrictMode。这时候会报出整个应用的并发不兼容警告，开发者还是需要对整个应用进行修改。从这个角度看，并不能达到逐步升级的目的。原因2其次，React团队发现开发者更多地受益于新架构，因为使用了并发特性（ConcurrentFeature）。并发特性指的是只有开启并发更新后才能使用的特性，比如：useDeferredValueuseTransition所以，还是可以默认使用同步更新，使用并发特性后再开启并发更新。在v18中运行以下代码：constApp=()=>{const[count,updateCount]=useState(0);const[isPending,startTransition]=useTransition();constonClick=()=>{//使用并发特性useTransitionstartTransition(()=>{//本次更新为并发更新updateCount((count)=>count+1);});};返回{count};};由于updateCount是在startTransition的回调函数中执行的（利用并发特性），updateCount会触发并发更新。如果不执行updateCount作为startTransition的回调函数，那么updateCount会触发默认的同步更新。可以观察这两种情况是否启用了时间分片来区分是否是并发更新。完整代码见Demo地址。结论在v18中，不再有三种模式，而是以是否使用并发特性作为是否开启并发更新的依据。具体来说，在v18中统一使用ReactDOM.createRoot来创建应用。不使用并发特性时，表现如案例3。使用并发特性后，性能如案例4。React18稳定版最快明年1月底到货。你还能学会移动吗？
