立即领取|华润集团、宁德核电、东风岚图等 20+ 标杆企业数字化人才培养实践案例 了解详情
写点什么

React 18 发布

  • 2022-04-01
  • 本文字数:1178 字

    阅读完需:约 4 分钟

React 18 发布

3 月 29 日,React 团队宣布 React 18 正式发布。该版本的主要更新包括开箱即用的功能改进,如自动批处理、新的 AIP(如 startTransition)和支持 Suspense 的流式服务器端渲染。

 

官方博客指出,此版本许多功能都建立在新的并发渲染器之上,这是一个解锁强大新功能的幕后更改。Concurrent React 是可选的,它仅在用户使用并发功能时启用,但开发团队认为它将会对大众构建应用程序的方式产生重大影响。

 

“我们花了数年时间研究和开发对 React 并发的支持,并且我们特别注意为现有用户提供逐步采用的路径。去年夏天,我们成立了 React 18 工作组,收集社区专家的反馈,确保整个 React 生态系统的顺利升级体验。”

 

React 18 的新功能如下:

 

自动批处理功能

 

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

 

Transitions 功能

 

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

 

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

 

新的 Suspense 功能

 

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

 

新的客户端和服务器渲染 API

 

在这个版本中,开发团队重新设计了他们为在客户端和服务器上呈现而公开的 API。这些更改允许用户在升级到 React 18 中的新 API 时继续使用 React 17 模式下的旧 API。

 

新的严格模式行为 (Strict Mode Behaviors)

 

此功能将为 React 应用程序提供更好的开箱即用性能,但要求组件能够对多次挂载和销毁的效果具有弹性。大多数效果无需任何更改即可工作,但有些效果假定它们只挂载或销毁一次。为了帮助解决这些问题,React 18 为严格模式引入了一个新的仅限开发的检查。

 

每当第一次安装组件时,此新检查将自动卸载并重新安装每个组件,并在第二次安装时恢复先前的状态。

 

原文详情:

 

https://reactjs.org/blog/2022/03/29/react-v18.html

2022-04-01 13:358841

评论

发布
暂无评论
发现更多内容

低代码旋风将席卷整个IT业界,带来应用开发的新革命和新里程!

J2PaaS低代码平台

IPFS系统APP软件开发

系统开发

架构设计大作业 2

仲夏

小说内容理解

DataFunTalk

AI 推荐系统

“让专业的人做专业的事”,畅捷通与阿里云的云原生故事

阿里巴巴中间件

云计算 云原生

ReactNative | 通过文件下载/打开需求,聊聊使用三方库

梁龙先森

大前端 技术方案 React Native

打通经济命脉,区块链助力实体商超变革

CECBC

区块链

云原生架构-静态代码扫描SonarQube超时

云原生实验室

DevOps 云原生 jenkins SonarQube Pipeli

天下武功,唯”拆“不破之架构篇二 | 技术人应知的创新思维模型 (9)

Alan

架构 技术 技术人应知的创新思维模型 七日更 28天写作

58同城风控平台演进

DataFunTalk

架构 中台

网络模拟器:Cisco Packet Tracer 设备登陆实验

阿里P8大牛亲自讲解!6年菜鸟开发面试字节跳动安卓研发岗,成功收获美团,小米安卓offer

欢喜学安卓

android 程序员 面试 移动开发

Serverless 在 SaaS 领域的最佳实践

阿里巴巴中间件

阿里巴巴 中间件

2020H1中国AI云服务市场规模增长远超预期;C++20 标准正式发布

京东科技开发者

云计算 AI IoT

全面 Severless 化只需要 7天!看南瓜电影的云上升级

阿里巴巴中间件

阿里巴巴 中间件

我对2021的期待,从合上这份2020日历开始

脑极体

阿里P8大牛亲自讲解!Android高级工程师面试实战,Android岗

欢喜学安卓

android 程序员 面试 移动开发

重庆打造区块链产业高地

CECBC

区块链

2020盘点之手机失窃事件复盘分析

石君

信息安全 资金安全 手机失窃

甲方日常 77

句子

工作 随笔杂谈 日常

十大经典排序算法最强总结(含Java、Python码实现)

Java 面试 算法

腾讯T2手把手教你!字节跳动历年校招Android面试真题解析,含BATJM大厂

欢喜学安卓

android 程序员 面试 移动开发

美团面试:为什么就能直接调用userMapper接口的方法?

田维常

美团

时空大数据与智能技术的时代共舞,百度地图给2020的答案

脑极体

五步带你探究爬虫爬取视频弹幕背后的真相,附爬虫实现源码

小Q

学习 编程 架构 面试 python 爬虫

C语言编程:入门指南(一周内学懂)

计算机与AI

c

工具词典:中立观点

lidaobing

维基百科 28天写作

Head First设计模式

田维常

史上最全面‘java监听器’解读,读完就能用进项目

Java架构师迁哥

百分点智能对话技术探索实践

DataFunTalk

AI

架构革新路漫漫,京东智联云自研服务器设计细节探秘

京东科技开发者

服务器 数据中心 IDC

React 18 发布_大前端_闫园园_InfoQ精选文章