前端跳槽突围课：React18底层源码深入剖析（21章）





并发，在操作系统中，是指一个时间段中有几个程序都处于已启动运行到运行完毕之间，且这几个程序都是在同一个处理机上运行，但任一个时刻点上只有一个程序在处理机上运行。


并发的关键是具备处理多个任务的能力，但不是在同一时刻处理，而是交替处理多个任务。比如吃饭到一半，开始打电话，打电话到一半发现信号不好挂断了，继续吃饭，又来电话了…但是每次只会处理一个任务。


React 中的视觉更新主要分为两个阶段：渲染阶段与提交阶段。这里的渲染阶段属于纯计算阶段，期间 React 元素与现有 DOM 进行协调（即比较）。此阶段需要创建新的 React 元素树，也被称为“虚拟 DOM”，它本质上就是 DOM 在轻量级内存中的表示形式。


在React 18之前，React采用的是基于时间分片的协调策略，它可以将大的更新任务切分为多个小的任务，从而避免阻塞用户界面。但这种策略需要手动添加时间切片代码，而且对于复杂的更新任务难以保证性能。因此，React 18引入了全新的并发模式，它可以自动将任务划分为可中断的小任务，从而更高效地利用CPU资源，提高应用的渲染速度。这个新功能被称为“React的异步渲染（asynchronous rendering）”。


一个简单的例子，来说明异步渲染的特点。假设你有一个很长的待渲染的列表，如果只是简单地将整个列表作为一个更新任务，那么当用户滚动到列表某一部分的时候，就会出现界面卡顿的情况。而当采用异步渲染的方式时，React会将列表按照一定的规则切分为多个小任务，并在每个任务之间插入优先级较低的任务，这就可以避免长时间占用CPU资源，保证用户界面的流畅性。


React 18的并发模式如何实现？
React 18的并发模式主要通过两个新的API来实现：useTransition()和useDeferredValue()。