React 18 撕裂介绍

·  阅读 1831

本文源于翻译 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 的值就是蓝色),但是之后渲染的任何组件都会获取当前的值,这时当前值已经变化为红色。这正是第三张图中发生的情况。现在,访问外部状态的组件得到的值都是红色。

最后,在最后一张图我们看到组件的颜色有红色和也有蓝色,但是在上面示例图中这些组件的颜色都是蓝色。它们虽然读取同一个数据却显示出不同的值,这种边缘情况就是 “撕裂”。

译者注:很多情况下,开发人员会将 useEffectuseLayoutEffect 带来的渲染问题误以为是发生了撕裂,判断的依据在于是否使用了外部状态。 撕裂通常是由于 React 使用了外部的状态导致的。React 在 并发渲染过程中,这些外部的状态会发生变化,但是 React 却无法感知到变化。在这个代码示例 实现了一个类似 Redux 的功能,然后发生了撕裂现象。 本文只是介绍产生撕裂的原因,并没有提到如何避免,需要阅读其他文档


微信搜索 ikoofe, 关注公众号「KooFE前端团队」不定期发布前端技术文章。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改