大家好，我卡颂。

置信很多关注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稳定版最快明年一月底到来，你还学的动吗？