AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

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

评论

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

CleanMyMac试用版4.12.1下载教程

茶色酒

CleanMyMac X CleanMyMac X2023

CleanMyMacX2023免费版Mac清理软件

茶色酒

CleanMyMacX

基础设施 NFTScan 正式发布 Cronos 网络 NFT 浏览器

NFT Research

区块链 NFT 数据基础设施

Zebec获BNB Chain生态大力支持,ZBC通证将陆续登录一线平台

鳄鱼视界

用javascript分类刷leetcode3.动态规划(图文视频讲解)

js2030code

JavaScript LeetCode

OpenMLDB 社区月报 | 2022年11月

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

活动预告 | 2022 中国开源开发者(北京)峰会

第四范式开发者社区

人工智能 机器学习 数据库 特征

如何用纯css代码实现太极阴阳鱼动画效果

千锋IT教育

从源码到架构实战,Spring Boot+Spring Cloud微服务开发笔记全分享

小小怪下士

Java spring 微服务 springboot SpringCloud

Meetup No.8 回顾 | OpenMLDB + MaxCompute:集成打通云上生态,高效构建 AI 应用

第四范式开发者社区

人工智能 数据库 开源 时序数据库 特征

Apache APISIX 玩转 Tongsuo 国密插件

API7.ai 技术团队

加密 api 网关 Apache APISIX

【Meetup 明天见】OpenMLDB + MaxCompute:集成打通云上生态,高效构建 AI 应用

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

列存引擎 Tianmu 如何实现 Delete?| StoneDB 研发分享 #3

StoneDB

MySQL HTAP 数据库· StoneDB 12 月 PK 榜

数据库挖矿系列-优化器设计探索穿越之旅

阿里技术

数据库

跬智信息(Kyligence)荣获浦东新区人工智能创新应用大赛一等奖

Kyligence

大数据 人工智能创新应用大赛

花费半个月啃完这份滴滴Redis核心手抄本,我终于把面试官按在地上摩擦了

程序知音

Java 数据库 redis 后端技术

前端工程师leetcode算法面试必备-二分搜索算法(中)

js2030code

JavaScript LeetCode

专访 | 刘乔升:开源是人类智力劳动最好的组织形式

第四范式开发者社区

人工智能 机器学习 数据库 开源 时序数据库

融合内存计算和分布式计算 数据智能分析处理平台RapidsDB更快、更简单、性价比更高

科技热闻

【计算讲谈社】第十四讲|从学科融合走出的数字人,是技术变革还是应用创新?

大咖说

阿里云 吴翰清 数字人 元宇宙游戏

前端工程师leetcode算法面试必备-二分搜索算法(下)

js2030code

JavaScript LeetCode

龙蜥社区高性能存储技术 SIG 11 月运营回顾 | 龙蜥 SIG

OpenAnolis小助手

开源 高性能 存储 龙蜥社区 sig

【MyBatis】mybatis中#{}与${}的区别

No8g攻城狮

MySQL mybatis sql

cleanmymac2023体验版功能讲解

茶色酒

CleanMyMac CleanMyMac X2023

如何基于 APISIX 迭代数字智联平台

API7.ai 技术团队

api 网关 Apache APISIX 用户案例

柏睿数据融合数据联邦+AI 打造更快、更简单、性价比更高的数据智能分析处理平台

科技热闻

一个多开发虚拟环境的命令行工具——asdf

吴脑的键客

Python ruby

澜舟2022年度产品发布,抢鲜看!

澜舟孟子开源社区

人工智能

Dimitra荣获Web3 & Blockchain企业精神奖,有望成Web3农业领导品牌

股市老人

【运营宝典】华为分析服务如何助力广告投放策略优化?

HarmonyOS SDK

HMS Core

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