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版本一定属于如下一种情况：

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

理想与现实的差距

React团队的愿景是：

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

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

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

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

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

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

渐进升级第一步

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

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

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

渐进升级第二步

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

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

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

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

比如：调整之前，大多数事件会统一冒泡到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稳定版最快明年一月底到来，你还学的动吗？