React推出并发模式，带来了什么好处？
极客时间编辑部
讲述：丁婵大小：6.66M时长：04:51
此前，React 推出并发模式，并以文档形式提供了并发模式（Concurrent Mode）的理论概述。那么并发模式是什么，能为技术人带来什么好处呢？简单来说它可以中断渲染、指定加载顺序、并行处理多状态。具体内容如下。
什么是并发模式？
并发模式是一组新功能，可以帮助 React 应用程序保持响应状态，并适当调整用户的设备功能和网络速度。
目前，包括 React 在内的 UI 库常见的工作机制是，一旦它们开始渲染一项更新，或者创建新的 DOM 节点，并在组件内部运行代码等，它们就不会中断这项工作。这种方法被称为“阻止渲染”。
而在并发模式下，渲染不会阻塞，它是可中断的，这改善了用户体验。它还可以解锁以前无法实现的一些新功能。
可中断渲染
考虑一个可过滤的产品列表。你可能遇到过这种情况，那就是在列表过滤器中输入过滤条件时，每次按键都会出现卡顿。
一种常见的解决方法是对输入“消除抖动”。启用防抖功能后，我们只会在用户停止输入之后才更新列表。但我们敲键盘时，UI 是不会更新的，这很让人泄气。或者我们可以“限流”输入，并以某个给定的频率上限来更新列表。但在性能较低的设备上仍然会卡顿。
其实，卡顿的原因很简单：渲染开始后就不能中断了，因此浏览器无法在键盘按下后立即更新文本输入。无论 UI 库（例如 React）在基准测试上表现多好，如果它使用阻塞渲染，那么总会有组件中的某些工作造成卡顿，而且通常没有简单的解决方案。
并发模式使渲染可中断，从而从根本上解除了这一限制。这意味着当用户按下一个键时，React 不需要阻止浏览器更新文本输入。相反，它可以让浏览器绘制输入的更新，然后继续在内存中渲染更新后的列表。渲染完成后，React 将更新 DOM，更改将反映在屏幕上。
指定加载顺序
并发模式就好像 React 使用“分支”工作一样。分支不仅对短期修复有用，而且对长期运行的功能也有意义。有时你可能会开发某项功能，但可能要花几周的时间才能使其处于“足够好的状态”以合并入主干。
想象一下，我们正在一个应用程序的两个页面之间跳转。有时，我们可能没加载足够的代码和数据来在新页面上向用户显示“足够好”的加载状态。跳转到空白页或显示一个巨大的处理中的图标是非常糟心的体验。但是，获取必要的代码和数据往往也不会花费太长时间。如果 React 可以在旧页面上停留更长的时间，并在显示新页面之前“跳过”“不良加载状态”，效果不就会更好了吗？
尽管现在这是可以做到的，但具体执行起来很麻烦。在并发模式下，这一功能是内置的。React 首先开始在内存中准备新页面，或者正如我们比喻的情况，“在另一个分支上”做准备。因此 React 可以在更新 DOM 之前等待加载更多内容。在并发模式下，我们可以告诉 React 继续显示可完全互动的旧页面，并在页面上嵌入加载指示器。当新页面准备就绪时，React 就可以带我们跳转过去。
并行处理多状态
在并发模式下，React 可以并行处理多个状态更新：
对于受 CPU 影响的更新（例如创建 DOM 节点和运行组件代码），并发意味着更紧急的更新可以“中断”已经开始的渲染。
对于受 IO 影响的更新（例如从网络中获取代码或数据），并发意味着 React 甚至可以在所有数据到达之前就开始在内存中渲染，无需显示令人讨厌的加载中状态。
重点在于，你使用 React 的方式没有变化。组件、props 和状态之类的概念本质上没有改变。要更新屏幕时，你就会设置状态。
React 使用启发式方法来决定更新的“紧急程度”，并允许你使用少量几行代码来调整，以便在每次交互时都获得所需的用户体验。
以上就是并发模式的三个功能，需要注意的是，这些功能仍处于实验阶段，未来可能会发生更改。它们还不是稳定的 React 版本的一部分，但你可以在实验版本中尝试它们。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论