React 18不再依赖Concurrent Mode开启并发了

大家好，我卡颂。

相信很多关注React进展的朋友都了解Concurrent Mode，他是渐进升级策略的产物。

由于策略调整，根据What happened to concurrent mode?，在v18中将不会有Concurrent Mode了。

没有Concurrent Mode，那该如何使用并发更新呢？

一句话总结：在v18中，不再有三种模式，而是以是否使用并发特性作为是否开启并发更新的依据。

更详细的解释，让我们一起从React渐进升级策略的演进过程中寻找答案。

欢迎加入人类高质量前端框架研究群，带飞

React有多少种架构？

从最老的版本到当前的v18，市面上有多少个版本的React？

可以从架构角度来概括下，当前一共有两种架构：

采用不可中断的递归方式更新的Stack Reconciler（老架构）
采用可中断的遍历方式更新的Fiber Reconciler（新架构）

新架构可以选择是否开启并发更新，所以当前市面上所有React版本一定属于如下一种情况：

老架构（v15及之前版本）
新架构，未开启并发更新，与情况1行为一致（v16、v17默认属于这种情况）
新架构，未开启并发更新，但是启用了一些新功能（比如Automatic Batching）
新架构，开启并发更新

理想与现实的差距

React团队的愿景是：

使用老版本的开发者可以逐步升级到新版，即从情况1、2、3向情况4升级。

但是这中间存在极大的阻力，因为情况4的React一些行为异于情况1、2、3。

比如如下三个生命周期函数在情况4的React下是“不安全的”：

componentWillMount
componentWillReceiveProps
componentWillUpdate

贸然升级可能造成老代码不兼容。

为了让广大开发者能够平滑过渡，React团队采用了渐进升级方案。

渐进升级第一步

渐进升级方案的第一步是规范代码。

v16.3新增了StrictMode，对开发者编写的不符合并发更新规范的代码作出提示，逐步引导开发者写出规范代码。

比如，使用上述不安全的生命周期函数时会产生如下报错信息：

StrictMode下使用不安全生命周期函数报错

渐进升级第二步

下一步，React团队让不同情况的React可以在同一个页面共存，借此可以让情况4的React逐步渗入原有的项目。

具体做法是提供三种开发模式：

Legacy模式，通过ReactDOM.render(<App />, rootNode)创建的应用遵循该模式。默认关闭StrictMode，表现同情况2
Blocking模式，通过ReactDOM.createBlockingRoot(rootNode).render(<App />)创建的应用遵循该模式，作为从Legacy向Concurrent过渡的中间模式，默认开启StrictMode，表现同情况3
Concurrent模式，通过ReactDOM.createRoot(rootNode).render(<App />)创建的应用遵循该模式，默认开启StrictMode，表现同情况4

3种模式可用特性对比

为了让不同模式的应用可以在同一个页面内工作，需要调整一些底层实现。

比如：调整之前，大多数事件会统一冒泡到HTML元素，调整后事件会冒泡到应用所在根元素。

这些调整工作发生在v17，所以v17也被称作为开启并发更新做铺垫的垫脚石版本。

最新的渐进升级策略

时间前进到2021年6月8日，v18工作组成立。

在与社区进行大量沟通后，React团队意识到当前的渐进升级策略存在两方面问题。

原因一

首先，由于模式影响的是整个应用，所以无法在同一个应用中完成渐进升级。

举个例子，开发者将应用中ReactDOM.render改为ReactDOM.createBlockingRoot，从Legacy模式切换到Blocking模式，这会自动开启StrictMode。

此时，整个应用的并发不兼容警告都会上报，开发者还是需要修改整个应用。

从这个角度看，并没有起到渐进升级的目的。

原因二

其次，React团队发现：开发者从新架构中获益，更多是由于使用了并发特性（Concurrent Feature）。

并发特性指开启并发更新后才能使用的特性，比如：

useDeferredValue
useTransition

所以，可以默认情况下仍使用同步更新，在使用了并发特性后再开启并发更新。

在v18中运行如下代码：

const App = () => {
  const [count, updateCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const onClick = () => {
    // 使用了并发特性useTransition
    startTransition(() => {
      // 本次更新是并发更新
      updateCount((count) => count + 1);
    });
  };
  return <h3 onClick={onClick}>{count}</h3>;
};
复制代码

由于updateCount在startTransition的回调函数中执行（使用了并发特性），所以updateCount会触发并发更新。

如果updateCount没有作为startTransition的回调函数执行，那么updateCount将触发默认的同步更新。

你可以观察这两种情况是否开启时间切片来区分是否是并发更新，完整代码见Demo地址

结论

在v18中，不再有三种模式，而是以是否使用并发特性作为是否开启并发更新的依据。

具体来说，在v18中统一使用ReactDOM.createRoot创建应用。

当不使用并发特性时，表现如情况3。使用并发特性后，表现如情况4。

React18稳定版最快明年一月底到来，你还学的动吗？