多项目加载顺序修改_React推出并发模式:可中断渲染、指定加载顺序、并行处理多状态...

8fff9d57a59abf1d939080091147c357.png

警告:本文档介绍的实验功能在稳定版本中尚不可用。不要在生产应用程序中依赖 React 的实验性构建。这些功能可能会发生重大更改,而且直到功能成为 React 的一部分之前这类更改都不会发出警告。本文档面向早期使用者和对此感兴趣的用户。如果你不熟悉 React,那就不必为这些功能担心——它们并非你现在就需要学习的内容。本文档提供了并发模式(Concurrent Mode)的理论概述。如果需要更具体的介绍,可以查阅文末的附录。


什么是并发模式?

并发模式是一组新功能,可以帮助 React 应用程序保持响应状态,并适当调整用户的设备功能和网络速度。

这些功能仍处于实验阶段,未来可能会发生更改。它们还不是稳定的 React 版本的一部分,但你可以在实验版本中尝试它们。

阻塞与可中断渲染

为了更好地解释并发模式,我们用版本控制来打比方。如果你在一个团队中工作,你们可能会使用像 Git 这样的版本控制系统,开发很多分支。当某个分支完成后,你可以将你的工作合并到主干上,这样其他人就可以拉取它了。

版本控制系统还没诞生的时候,开发工作流程是完全不一样的——那时没有分支的概念,如果要编辑某些文件,必须告诉所有人在你完成工作之前不要碰这些文件。你甚至无法与别人同时研究它们——实际上这些文件把你圈住了。

这就是今天包括 React 在内的 UI 库常见的工作机制。一旦它们开始渲染一项更新,或者创建新的 DOM 节点,并在组件内部运行代码等,它们就不会中断这项工作。我们将这种方法称为“阻止渲染”。

在并发模式下,渲染不会阻塞——它是可中断的,这改善了用户体验。它还可以解锁以前无法实现的一些新功能。这篇文档就是对这一新功能的高层次概述。

可中断渲染

考虑一个可过滤的产品列表。你可能遇到过这种情况,那就是在列表过滤器中输入过滤条件时,每次按键都会出现卡顿。更新产品列表时,某些工作可能是不可避免的,例如创建新的 DOM 节点或由浏览器绘制布局等。但是,我们 何时 以及 如何 执行这些任务是问题的关键所在。

解决卡顿的一种常见方法是对输入“消除抖动”。启用防抖功能后,我们只会在用户停止输入 之后 才更新列表。但我们敲键盘时,UI 是不会更新的,这很让人泄气。或者我们可以“限流”输入,并以某个给定的频率上限来更新列表。但在性能较低的设备上我们仍然会卡顿。防抖和限流都会带来不够理想的用户体验。

卡顿的原因很简单:渲染开始后就不能中断了,因此浏览器无法在键盘按下后立即更新文本输入。无论 UI 库(例如 React)在基准测试上表现多好,如果它使用阻塞渲染,那么总会有组件中的某些工作造成卡顿,而且通常没有简单的解决方案。

并发模式使渲染可中断,从而从根本上解除了这一限制。这意味着当用户按下一个键时,React 不需要阻止浏览器更新文本输入。相反,它可以让浏览器绘制输入的更新,然后继续 在内存中 渲染更新后的列表。渲染完成后,React 将更新 DOM,更改将反映在屏幕上。

从概念上讲,你可以将其视为 React 在“分支”上准备每个更新的过程。就像你可以放弃分支工作或在分支之间切换一样,“并发模式”下的 React 可以中断正在进行的更新以执行更重要的任务,然后返回到之前的工作。这种技术可能会让你想起视频游戏中的双重缓冲。

并发模式技术减少了 UI 中的防抖和限流的需求。由于渲染是可中断的,因此 React 无需人为地 延迟 工作来避免卡顿。它可以立即开始渲染,但在需要使应用程序保持响应时会中断这项工作。

指定加载顺序

前文提到,并发模式就好像 React 使用“分支”工作一样。分支不仅对短期修复有用,而且对长期运行的功能也有意义。有时你可能会开发某项功能,但可能要花几周的时间才能使其处于“足够好的状态”以合并入主干。和版本控制相似,渲染也是一个道理。

想象一下,我们正在一个应用程序的两个页面之间跳转。有时,我们可能没加载足够的代码和数据来在新页面上向用户显示“足够好”的加载状态。跳转到空白页或显示一个巨大的处理中的图标是非常糟心的体验。但是,获取必要的代码和数据往往也不会花费太长时间。如果 React 可以在旧页面上停留更长的时间,并在显示新页面之前“跳过”“不良加载状态”,效果不就会更好了吗?

尽管现在这是可以做到的,但具体执行起来很麻烦。在并发模式下,这一功能是内置的。React 首先开始在内存中准备新页面,或者正如我们比喻的情况,“在另一个分支上”做准备。因此 React 可以在更新 DOM 之前等待加载更多内容。在并发模式下,我们可以告诉 React 继续显示可完全互动的旧页面,并在页面上嵌入加载指示器。当新页面准备就绪时,React 就可以带我们跳转过去。

并 发

回顾一下上面的两个例子,看看并发模式如何将它们结合起来。在并发模式下,React 可以并行处理多个状态更新——就像不同的团队成员使用分支独立工作一样:

  • 对于受 CPU 影响的更新(例如创建 DOM 节点和运行组件代码),并发意味着更紧急的更新可以“中断”已经开始的渲染。
  • 对于受 IO 影响的更新(例如从网络中获取代码或数据),并发意味着 React 甚至可以在所有数据到达之前就开始在内存中渲染,无需显示令人讨厌的加载中状态。

重点在于,你使用React 的方式没有变化。组件、props 和状态之类的概念本质上没有改变。要更新屏幕时,你就会设置状态。

React 使用启发式方法来决定更新的“紧急程度”,并允许你使用少量几行代码来调整,以便在每次交互时都获得所需的用户体验。

将研究成果投入生产

这些并发模式功能有一个共同的目标。它的任务是帮助将人机交互研究的成果整合到现实的用户界面中。

例如,研究表明,在页面之间切换时显示过多的中间加载状态会 拖慢 切换速度,所以并发模式会使用固定的“时间表”显示新的加载状态,以避免卡顿和过于频繁的更新。

同样,从研究中我们知道,悬停和文本输入之类的交互需要在很短的时间内处理完毕,而单击和页面跳转在让用户感到卡顿之前可以等待更长的时间。并发模式在内部使用的不同“优先级”大致对应于人类感知研究中的交互类别。

专注于用户体验的团队有时会通过一次性解决方案来处理类似的问题。但这些解决方案很难维护,因此很难长久。并发模式的目标是将 UI 研究的成果纳入抽象本身,并提供符合习惯的方式来使用它们。作为一个 UI 库,React 可以很好地做到这一点。

下一步

现在你知道了什么是并发模式!

下面的这些文档提供了有关特定主题的更多详细信息:

  • 为数据获取挂起——描述了一种在 React 组件中获取数据的新机制。https://reactjs.org/docs/concurrent-mode-suspense.html
  • 并发用户界面模式——展示了一些基于并发模式和挂起模式的用户界面模式。https://reactjs.org/docs/concurrent-mode-patterns.html
  • 采用并发模式——说明了如何在项目中尝试并发模式。https://reactjs.org/docs/concurrent-mode-adoption.html
  • 并发模式 API 参考——实验版本中可用的新 API 文档。https://reactjs.org/docs/concurrent-mode-reference.html

原文链接:

Introducing Concurrent Mode (Experimental) – React​reactjs.org
803d29e159007755546d803df74cc791.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/411674.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[html] 制作一个多选的下拉框

[html] 制作一个多选的下拉框 定义盒子 a标签 绑定事件个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

好东西仿Vista窗体

这是在网上看到的&#xff0c;然后改了一下&#xff01; 很好调用&#xff01;&#xff01;&#xff01;&#xff01; <SCRIPT src"_Window.js" typetext/javascript></SCRIPT> 窗体类 <SCRIPT src"index.js" typetext/javascript> /…

同步考勤数据 钉钉_作为学校,我为何选择微校wxiao考勤打卡?

随着移动互联网的兴起&#xff0c;越来越多的中小学摒弃了传统纸质考勤方式&#xff0c;采用智能考勤。目前&#xff0c;最常用的智能考勤方式可分为基于非移动端和移动端两种。其中&#xff0c;基于非移动端的包括人脸识别、指纹识别、虹膜识别考勤方式&#xff0c;基于移动端…

Guitar Por如何演奏刮弦

每当我们听到吉他现场演出的时候&#xff0c;看到吉他手在激烈的刮弦时&#xff0c;都觉得很酷&#xff0c;非常有感染力。刮弦在我们弹吉他或编曲时&#xff0c;会经常用到&#xff0c;虽然时间很短&#xff0c;但会为你加分不少。 那么我们应该如何演奏刮弦呢&#xff0c;我们…

[html] HTML全局属性(global attribute)有哪些(包含H5)?

[html] HTML全局属性(global attribute)有哪些&#xff08;包含H5&#xff09;&#xff1f; classiddatatypehrefstylewidthheighttargecheckeddisabledrequierefalttitlenamemulitp...多选valuereplaceholdersrc个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。…

3.6-3.8 分布式环境启动、测试

一、HDFS1、初始化文件系统#master上 [rootmaster hadoop-2.5.0]# pwd /opt/app/hadoop-2.5.0[rootmaster hadoop-2.5.0]# bin/hdfs namenode -format #最后几行看到successfully&#xff0c;代表成功2、启动#启动 [rootmaster hadoop-2.5.0]# sbin/start-dfs.sh集群批量命令…

unity 日志级别_【Unity】通用的Debugger日志模块

usingSystem;usingSystem.IO;namespaceUnityEngine{/// ///系统日志模块/// public classDebugger{public static bool EnableLog; //是否启用日志&#xff0c;仅可控制普通级别的日志的启用与关闭&#xff0c;LogError和LogWarn都是始终启用的。public static bool EnableTime…

[html] html的元素有哪些(包含H5)?

[html] html的元素有哪些&#xff08;包含H5&#xff09;&#xff1f; 块级元素&#xff1a;head -meat - 申明页面的诸多属性title - 窗口标题style - 样式body - 文本内容header - 头部块section - 内容块footer - 底部块article - 文章标签asidenavmenubirhr - 下划线h1-h6…

LINQ - 對付 SQL Injection 的 免費補洞策略 (转)

LINQ - 對付 SQL Injection 的 "免費補洞策略" LINQ - 對付 SQL Injection 的 "免費補洞策略" 作者&#xff1a;黃忠成 一連串的 Mass SQL Injection 攻擊&#xff0c;讓我們回憶起數年前的 SQL Injection 攻擊&#xff0c;多年後的今天&#xff0c;我們仍…

【BZOJ2054】疯狂的馒头(并查集)

/* 经典思路&#xff0c; 倒序并查集处理即可*/#include<cstdio> #include<algorithm> #include<cstring> #include<queue> #include<iostream> #define ll long long #define mmp make_pair #define M 1000010 using namespace std; int read()…

[html] 渐进式渲染是什么?

[html] 渐进式渲染是什么&#xff1f; 渐进式渲染指在做浏览器兼容时&#xff0c;先兼容最低版本&#xff0c;保证基本功能&#xff0c;然后再在高级浏览器上做优化个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎…

mysql int()_简单谈谈MySQL中的int(m)

我们在设计表的时候&#xff0c;如果碰到需要设置int(整型)的时候&#xff0c;通常会按照惯例(大家都这样写)设置成int(11)。那么这里为什么是11呢&#xff1f;代表的又是什么呢&#xff1f;以前我一直以为这里是在限制int显示的宽度&#xff0c;后来仔细研究和通过上网查询发现…

Visual Studio .Net团队开发[转]

一、 开发前的准备1、 在装有Windows 2000或者Windows XP Professional的机器上安装.net Framework SDK、Visual Studio.Net、Visual Source Safe 6C。&#xff08;如果用户操作系统是Windows .Net Server&#xff0c;则无须安装.Net Framework SDK&#xff0c;.Net Server自带…

mysql数据库root密码在哪个文件中_mysql - 本地数据库忘记了root用户的密码

在连接本地mysql数据库一直都是客户端保存密码&#xff0c;然后一键登录。突然开发要用到这个数据库时&#xff0c;脑子嗡嗡的了……忘记了密码&#xff0c;试了很多遍还是记不起来。没办法只能去找方案了&#xff0c;网上还是有很多跟我一样的大佬的。这里记录下&#xff0c;省…

[html] Form表单是怎么上传文件的?你了解它的原理吗?

[html] Form表单是怎么上传文件的&#xff1f;你了解它的原理吗&#xff1f; 简单来说就是把文件转化成字节流&#xff0c;然后使用http进行传输&#xff0c;后端接受后在把二进制转化成原先的文件格式。在HTML表单中&#xff0c;可以上传文件的唯一控件就是<input type&qu…

c#结构

结构&#xff1a;一次性声明多个变量 struct Books {public string title;public string author;public string subject;public int book_id; };public class StructTest {public static void Main(string[] args){Books Book1;Books Book2;Book1.title "c#从入门到放弃&…

[html] Ajax与Flash的优缺点分别是什么?

[html] Ajax与Flash的优缺点分别是什么&#xff1f; 使用的场景不一样&#xff0c;只有知道了它们各自的优缺点&#xff0c;才会应用到不同的场景。当然flash目前已经少用了&#xff0c;但还是存在于不同的场景中的&#xff0c;比如说直播中有些就用到flash…… 各有优势和劣势…

显卡型号后缀详解

显卡型号中最复杂的部分&#xff0c;应该是型号后的英文字母。因为它代表着显卡虽然采用同一个图形核心&#xff0c;但市场的定位不同。最麻烦的是ATI与NVIDIA公司各自使用的后缀字母不统一(也不可能统一)&#xff0c;让人看得眼花缭乱。LE&#xff1a;NVIDIA显卡型号采用的后缀…

mysql时间戳计算_mysql根据时间戳计算

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

在linux内核3.14.43添加自己的驱动源码,linux内核如何加入自己的驱动

linux添加自己的驱动&#xff0c;内核源码版本&#xff1a;3.14.431. 添加自己的文件夹 在驱动里面加入自己的文件夹&#xff0c;例如我在driver/char/文件夹里面加入自己的pwm驱动&#xff0c;我需要在char目录下&#xff0c;新建一个pwm_bl目录&#xff0c;在此目录里面放入你…