【React】Concurrent 的奥秘

这篇文章的主要内容包括：

• Concurrent 是为解决什么问题而出现的

• 它又是通过怎么样的方式来了解决这个问题

• 探索 Concurrent 的设计思路

Concurrent 为什么场景而生

Concurrent 早已不是什么新鲜概念了，这几年也被大家拿来各种解读。今天从 Concurrent 诞生的背景出发，也是想要找一个真实的角度来切入 Concurrent 。

其实呢，笔者个人认为深入了解一项技术之前，去真实地去面对它所面临的场景，这样对理解技术本身会更加有帮助，甚至没准你会有更好思路来解决问题。

计算密集型的“渲染”

在 JSConf Iceland 2018 上，React 团队关于 Beyond React 16 的分享中就提到了，在构建更好用户体验时所面临的两类场景：

其中一点就是：计算密集型（CPU）的 “渲染”。

React 是将我们的组件转化成了 **VDOM** 进行维护，当我们修改组件时，React 需要刷新全部的 VDOM ，而这个过程，我们就把它叫做 “渲染”。

这个 “渲染” 过程就是一个典型的计算密集型场景，它会因为 **VDOM** 的节点过多等因素，变成一个耗时的任务。

就像大家所熟知的那样，当 JS 长时间执行时，页面无法进行任何操作，会完全地卡在那个地方，直到 JS 执行结束。这样带来的用户体验无疑是非常糟糕的。

下面就是一个非常糟糕的例子：耗时缓慢的 “渲染” 让我们的输入感觉非常卡顿。