2025 年技术指引:让真实案例和经验为开发者开路 了解详情
写点什么

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

评论

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

吐血整理Windows电脑入侵自检大全

BigYoung

黑客 windows 日志 异常 自检

Django2.x中url路由的path()与re_path()参数解释

BigYoung

django path url re_path 参数

CIC国信公链:做坚实的底层技术支撑,让区块链为现代农业插上腾飞的翅膀

CNG农业公链

区块链 农业发展 CIC国信公链 CNG农业链 赵其刚

艺术与科技的碰撞!Tristan Easton携手英特尔为漫威粉丝带来十代酷睿《复联》收藏版

最新动态

LeetCode题解:88. 合并两个有序数组,双指针+从后往前,JavaScript,详细注释

Lee Chen

大前端 LeetCode

Linux入门系列1--环境准备及Linux安装

黑马腾云

Linux centos 运维 操作系统

linux入门系列5--新手必会的linux命令

黑马腾云

Linux centos7 Shell linux命令 linux操作

linux入门系列2--CentOs图形界面操作及目录结构

黑马腾云

Linux centos7 操作系统 系统运维

当代一线城市年轻人工作生活实录(HR篇)

Philips

Java 敏捷开发 快速开发 .net core

白话讲解:消息队列到底解决了什么问题?

博文视点Broadview

读书笔记 分布式 RocketMQ 中间件 消息队列

Kotlin这么火!如何快速从Java过渡到Kotlin

华章IT

Java kotlin 协程 安卓

lgloo Software 的 Jira Cloud 转型之旅

Atlassian

项目管理 DevOps 敏捷开发 Jira Cloud

十年磨一剑-BIGO全球音视频技术解决方案

InfoQ_3597a20b53cc

人工智能 大数据 技术

低/零代码平台的优点有哪些?

代码制造者

编程语言 低代码 零代码 信息化 编程开发

当代一线城市年轻人工作生活实录(HR篇)

Learun

Java 敏捷开发 快速开发 .net core

Nginx配置80端口用于多个域名

石云升

nginx 域名配置 80端口共用

linux入门系列4--vi/vim编辑器

黑马腾云

vim Linux centos7 操作系统 VI

「分布式一致性协议」从2PC、3PC、Paxos到 ZAB

大头星

Windows AD巡检报错处理

BigYoung

windows AD 报错 巡检

对于一款软件而言,完备的功能固然重要,但交互体验也不该被忽视

Learun

Java 敏捷开发 快速开发 .net core

为什么越来越多的非计算机领域企业,在自主做软件时都选择使用快速开发工具?

Learun

Java 敏捷开发 快速开发 .net core

《漫威复联》PC版游戏即将登陆,英特尔为其独家 CPU 合作伙伴

最新动态

话题讨论 | 特斯拉和拼多多杠上了,你有什么看法?

InfoQ写作社区官方

写作平台 话题讨论

当代一线城市年轻人生活工作实录(蓝领打工仔篇)

Philips

Java .net 敏捷开发 快速开发 MES系统

为什么越来越多的非计算机领域企业,在自主做软件时都选择使用快速开发工具?

Philips

Java 敏捷开发 快速开发 .net core

不懂 ZooKeeper?没关系,这一篇给你讲的明明白白

大头星

Java zookeeper 分布式

CentOS 7 配置Supervisor 服务遇到的坑总结

BigYoung

centos 报错 Supervisor

对于一款软件而言,完备的功能固然重要,但交互体验也不该被忽视

Philips

Java 敏捷开发 UI .net core 交互设计

linux入门系列3--常见的linux远程登陆管理工具

黑马腾云

Linux xshell securecrt putty finallshell

Django 表单处理流程详解

BigYoung

django 表单 流程

跟我一起基于Karma搭建一个测试环境(上)

Jack Q

大前端 Karma 测试框架搭建

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