本文源于翻译 What is tearing?
概述
撕裂（tearing）是图形编程中的一个传统术语，是指视觉上的不一致。
例如，在视频中画面撕裂是指在一个屏幕中看到了多个帧，这使视频看起来是有问题的。在用户界面中，撕裂是指一个 UI 上显示了同一状态的多个值。例如，您可能会在列表中为同一项目显示不同的价格，或者提交了价格错误的表单，甚至是在访问失效的存储值时崩溃。
由于 JavaScript 是单线程的，在 web 开发中通常不会出现这个问题。但是，在 React 18 中，并发渲染 (concurrent render) 有可能会出现这个问题，因为 React 在渲染过程中会被中断。也就是说在使用 startTransition 或 Suspense 等一些并发功能时，React 可以暂停去做别的事情。在这些暂停之间，一些更新会更改用于渲染的数据，这可能会导致同一份数据在 UI 上展示出两种不同的值。
这个问题是并发的必然结果。如果你想要能够中断渲染去响应用户输入，以获取更快速响应的交互体验，那么需要使正在渲染的数据有弹性的改变并导致用户界面的撕裂。
@flarnie 曾经在一个演讲中解释过这个问题，我们将在这篇文章中对这个问题做一个简要的概述，并对同步渲染和并发渲染过程做一些介绍。
同步渲染
以下面的示意图为例。
在第一张图片中，我们开始渲染 React 树。这个组件访问 external store 来获取颜色的数值。external store 提供的颜色是蓝色，因此组件渲染成蓝色。
在第二张图中，由于我们没有进行并发渲染，React 会继续渲染所有的组件，在这个过程中不会有中断。由于没有暂停或中断，external store 并不会发生变化。因此，所有的组件都会从 external store 中取到相同的值。
在第三张图中，我们看到所有的组件都被渲染成蓝色，它们看起来是相同的。UI 显示的状态始终是一致的，因为我们看到的屏幕上的渲染出来的内容都使用了相同的值。
最后，在第四张图中，external store 中的值能够被更新。这是因为 React 渲染完成，可以允许运行其他事情。如果 store 在 React 未渲染时更新，接下来 React 进行下一次渲染，我们将再次从第一张图开始，并且所有的组件会获得相同的值。
这就是为什么在并发渲染之前以及在其他大多数 UI 框架中，UI 渲染总是一致的。这是 React 在 React 17 中的工作方式；在 React 18 默认情况下不使用并发功能，也是这种工作方式。
并发渲染
在大部分场景下，并发渲染出来的 UI 表现都是一致的，在某些适当的条件下，会存在导致问题的边缘情况。具体情况，请看下面的示意图。 开始的第一张图片和上面的示意图是一样的，组件被渲染成了蓝色。
接下来，就不一样了。
因为使用了并发的一些特性，在并发渲染过程中 React 在完成渲染之前可以停下来，“让位” 给其他工作。这对于页面的响应程度来说是一个较大的收益，因为用户可以在页面上进行交互，而不会被 React 阻塞。在这种情况下，假设一个用户点击了按钮，将 store 的颜色由蓝色改为红色。在非并发渲染场景下，不会发生任何处理。在用户看来，页面被暂停了，他们无法单击任何内容。但是在并发渲染场景下，React 可以让点击发生反应，让用户感受到页面如丝般顺滑。
这个特性带来的结果是，用户交互（或其他工作，如网络请求或超时）可以更改外部状态中的值，在屏幕上可以渲染并显示出这些值。这就是可能导致问题的边缘情况。在第二张图片中，我们看到 React 已经暂停渲染，external store 因为用户交互而发生了变化。
问题在于第一个组件已经渲染为蓝色（因为当时 store 的值就是蓝色），但是之后渲染的任何组件都会获取当前的值，这时当前值已经变化为红色。这正是第三张图中发生的情况。现在，访问外部状态的组件得到的值都是红色。
最后，在最后一张图我们看到组件的颜色有红色和也有蓝色，但是在上面示例图中这些组件的颜色都是蓝色。它们虽然读取同一个数据却显示出不同的值，这种边缘情况就是 “撕裂”。
译者注：很多情况下，开发人员会将
useEffect或useLayoutEffect带来的渲染问题误以为是发生了撕裂，判断的依据在于是否使用了外部状态。 撕裂通常是由于 React 使用了外部的状态导致的。React 在 并发渲染过程中，这些外部的状态会发生变化，但是 React 却无法感知到变化。在这个代码示例 实现了一个类似 Redux 的功能，然后发生了撕裂现象。 本文只是介绍产生撕裂的原因，并没有提到如何避免，需要阅读其他文档。
微信搜索 ikoofe， 关注公众号「KooFE前端团队」不定期发布前端技术文章。
