写点什么

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:359339

评论

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

☕️【Java 技术之旅】带你一起攻克String类创建的难点分析

码界西柚

Java string pool string 6月日更

开源之夏来啦,欢迎报名 Apache APISIX 项目!

API7.ai 技术团队

开源 后端 技术人生 API 网关

宜兴牵手百度智能云共建人工智能应用中心,推动数字经济创新发展

百度大脑

人工智能

面试官:如何给字符串设计索引?

一个优秀的废人

MySQL 索引 字符串 索引优化

Kubernetes学习笔记之Calico CNI Plugin源码解析(二)

360技术

百度灵医智惠明星案例获人民日报点赞:智慧医疗让看病更便捷

百度大脑

人工智能 智慧医疗

阿里云官方出品:全面总结阿里云云原生架构方法论与实践经验

尹文敏

云计算 阿里云 云原生

《原则》(九)

Changing Lin

6月日更

如何针对美工与设计师的Maya工具进行版本控制

龙智—DevSecOps解决方案

程序员需要了解数据库知识么?

escray

学习 极客时间 朱赟的技术管理课 6月日更

准备3个月,面试10分钟,Java中高级岗面试为何越来越难?

Java架构师迁哥

福利时刻 十年黑客大佬的Web安全渗透技术分享

学神来啦

Linux 黑客 安全 运维自动化

Flink + Iceberg 在去哪儿的实时数仓实践

Apache Flink

flink

建信金科大咖访谈:ISO20000及ISO27001标准体系解读

金科优源汇

超全!阿里首发内部微服务架构笔记,再也不用为“微服务”苦恼了

Java架构师迁哥

创业邦南立新:搭建创新生态,是奔向万亿美金市值的必经之路

创业邦

如何科学制定和管理项目计划?

万事ONES

项目管理 ONES 项目经理

基于传感器的人体生命体征监控技术

不脱发的程序猿

物联网 传感器 智能医疗 人体生命体征监控技术

我人生的里程碑之【作为独立开发者,第一次承接外包项目的心得经历,也许说出你的心声哦!】

码界西柚

程序人生 6月日更

centos7使用

xujiangniao

Linux

博云作为专业独立PaaS厂商,入选中国PaaS市场研究报告

BoCloud博云

PaaS

用 CloudQuery 管理和操作数据库,更高效更安全

BinTools图尔兹

运维 dba 数据库管理工具

阿里工作8年,肝到P8就剩这份学习笔记了,已助朋友拿到10个Offer

Java 程序员 架构 面试

24道几乎必问的JVM面试题,我只会7道,你能答出几道?

北游学Java

Java 面试 JVM

从零开始学习3D可视化之模型动画

ThingJS数字孪生引擎

可视化 模型 大屏可视化 数字时代 3D可视化

油管视频下载: 如何下载油管视频到本地

科技猫

分享 教程 经验 油管视频下载 下载油管视频

2021年最新版Java后端最全面试攻略,全面对标BATJ

Java 程序员 架构 面试

在外包5年,每天读写删改,突然发现跳不出来了

Java架构师迁哥

☕️【Java技术之旅】带你一起探究String类不可变的特性

码界西柚

string 原理 字符串 6月日更

react源码解析9.diff算法

全栈潇晨

react源码

毕昇JDK:为啥是ARM上超好用的JDK

华为云开发者联盟

Java 华为 jdk Openjdk 毕昇 JDK

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