React 18完善并行机制,加入自动批处理、过渡API新功能

开发者现在已经可以在Npm,下载最新的开源JavaScript函数库React 18,这个版本正式加入自动批处理功能,和诸如startTransition等新API,还支持Suspense流媒体服务器渲染。这些新功能,都是创建在React新的并行(Concurrent)渲染器之上,由于这个Concurrent React新机制,将会大幅改变开发者构建应用程序的方法,官方在2021年夏天时候,甚至成立了React 18工作组来收集社群意见,确保React生态系统升级顺畅。

官方解释,并行本身并非一个新功能,而是一个幕后的机制,让React能够同时准备多个UI版本。React在内部以优先队列和多重缓冲等复杂技术,来创建并行机制,让React得以实现新功能提升用户体验。

Concurrent React的重要属性是能够中断交易,在React 18之前版本,或是在React 18中,未激活任何需要并行机制的功能之前,React都是以单一、不中断的同步交易运行,简单来说,用户还没在屏幕增至到结果之前,这个过程无法被中断。

而并行渲染则不同,React在渲染更新到一半时,可以暂停再继续渲染,甚至完全放弃整个渲染工作。React会保证即便是渲染到一半暂停,UI也会保持一致,React会等待DOM突变结束,直到整颗树被评估完成,这项能力使得React可以在背景准备新的屏幕画面,而不阻塞主要线程,因此应用程序即便处在大型渲染任务的中间,UI也能够立即回应用户输入,进而提供顺畅的用户体验。

官方表示,React 18是他们在这个新基础构建功能的开端。以技术上来说,并行渲染是一个破坏性变化,因为并行渲染是可以中断的,所以在激活这项机制时,组件的行为会略有不同。目前官方已经在React 18上,测试过数千个组件,几乎所有组件都可在激活并行渲染时运行,但仍有一些需要小幅度更新的组件,开发者可以按照自己的步调更新支持并行机制,因为React 18的并行渲染,仅会在应用程序使用新功能的时候激活。

React 18新加入自动批处理功能,React会将多个状态,更新到单一的重新渲染作业中,以获得更好的性能,过去没有自动批处理,开发者只能在React事件处理程序中批处理更新,而在默认状态下,Promise、setTimeout、原生事件处理程序,或任何React内部事件的更新,都不会以批处理,而在React 18中,这些更新都将可以自动批处理。

另外,React 18还引入了过渡(Transition)的新概念,用来区分紧急和非紧急更新。紧急更新表现在直接交互像是输入、点击和按下等操作,非紧急的过渡更新,则是将UI从视图过渡到另一个视图。官方表示,之所以打字、点击和按下等紧急更新需要立即回应,是因为对用户来说,如果这些行为没有立刻获得回应,用户会觉得应用程序发生问题,但是并非所有过渡都是相同的,因为用户并不会期望在屏幕增至到每个中间值。

因此开发者应该将单一用户的输入,区分为紧急更新与非紧急过渡更新,以提供最佳的用户体验,开发者可以在输入事件中,使用startTransition API,来告知React紧急与非紧急过渡更新。

官方在React 18中,还添加了对Suspense的支持,并使用并行渲染扩展其功能,开发者现在可以在React 18中结合使用Suspense与过渡API,以获得最佳的效果。Suspense可以让还没准备好渲染的UI,显示为加载状态,来解决程序代码分割(Code-splitting)和资料截取的问题。在这次更新中,React会推延渲染,直到应用程序加载足够的资料,以异步操作避免错误的加载状态出现。

React 18整体的升级政策,官方希望能让开发者的应用程序,顺利在React 18上运行,因此升级并不会破坏现有程序代码,开发者可以依照自己的开发节奏,逐渐添加并行支持,并使用