50+大厂技术专家现场分享,GMTC北京站9折购票倒计时,戳此查看最新日程 了解详情
写点什么

不再支持 IE,React 新特性详细解读

  • 2022 年 6 月 30 日
  • 本文字数:4026 字

    阅读完需:约 13 分钟

不再支持 IE,React 新特性详细解读

近日 React 18 已经正式发布了,带来了许多令人兴奋的新特性。在这个版本中,React 通过其改进的渲染系统带来了并发能力,并在此基础上构建了转换或自动批处理等性能增强特性。

 

本文将介绍这些特性的机制,以及它们对 React 开发人员有哪些帮助。

正式发布之路


在深入了解所有特性之前,我们先来回顾一下 React 18 发布背后的整个过程,因为与之前的版本相比这一次的发布经历非常独特。React 17 并没有带来很多新特性。然而它改进了很多基础组件,支持新 React 特性的无缝渐进采用,从而为未来的更新奠定了基础。这些更改的效果现在就体现在了 React 18 中。

 

React 发布过程中最显著的变化是与官方 alpha 版本一起,宣布新成立的 React 工作组(WG)。该小组的目标是收集来自社区的反馈,并帮助生态系统为即将到来的变化做好准备。此外,它是关于 React 内部工作的重要知识来源。

 

感谢 React 17 的改进和工作组的投入,React 18 最终成为了一个具有丰富特性的版本,却只有少量、重大更改。

重大更改


由于新的并发特性是渐进适配并按需启用的,React 18 中的重大更改仅限于几个简单的 API 更改,以及对 React 中多个行为的稳定性和一致性的一些改进。

客户端渲染 API


最引人注目的更改之一是新的,带有createRoot()的root API。它旨在替换现有的render()函数,提供更好的人体工程学并启用新的并发渲染特性。import { createRoot } from "react-dom/client";import App from "App";
const container = document.getElementById("app");const root = createRoot(container);root.render(<App />);
复制代码


请注意,这个新的 API 现在已从 react-dom/client 模块导出。

 

卸载和水合 API 也发生了变化。


// Unmount component at DOM node:// ...root.unmount();
// Hydrationimport { hydrateRoot } from "react-dom/client";// ...
const container = document.getElementById("app");const root = hydrateRoot(container, <App tab="home" />);
复制代码


由于使用 Suspense 时会出现不正确 timing 的问题,渲染回调已经一去不复返了。替代选择(虽然不是一对一的替换)是顶部组件内部的一个效果:


import { createRoot } from "react-dom/client";import { useEffect } from "react";import App from "App";
const App = () => { useEffect(() => { console.log("render callback"); });
return <div></div>;};const container = document.getElementById("app");const root = createRoot(container);root.render(<App />);
复制代码

自动批处理


createRoot() API 还是 React 18 中另一个改进的入口——自动批处理。在 React 的早​​期版本中,状态更新在 React 事件侦听器中完成时已经批量处理了,以优化性能并避免重渲染。从 React 18 开始,状态更新也将被安排到其他地方——比如在 Promise、setTimeout 回调和原生事件处理程序中。


const App = () => {  const handleClick = () => {    setA((a) => a + 1);    setB((b) => b - 1);    // Updates batched - single re-render  };
setTimeout(() => { setA((a) => a + 1); setB((b) => b - 1); // New (v18): Updates batched - single re-render }, 1000);
// ...};
复制代码


这个更改虽然一般来说符合人们期望,也挺有用,但可能是破坏性的。如果你的代码依赖于在分开的状态更新之间重渲染的组件,那么你必须使其适应新的批处理机制,或使用 flushSync()函数来强制立即刷新更改。


import { flushSync } from "react-dom";// ...
const handleClick = () => { flushSync(() => { setA((a) => a + 1); }); // Re-render flushSync(() => { setB((b) => b - 1); }); // Re-render};
复制代码

严格模式更新


React 18 带来了大把新特性,此外还有很多新特性正在路上。为了让你的代码为此做好准备,StrictMode 变得更加严格了。最重要的是,StrictMode 将测试组件对可重用状态的弹性,模拟一系列的挂载和卸载行为。它旨在让你的代码为即将推出的特性(可能以<Offscreen>组件的形式)做好准备,这将在组件的挂载周期中保留这个状态。

 

虽然它肯定会在未来提供更好的性能,但就目前而言,启用 StrictMode 时必须要考虑这个事情。

其他更改


除了以上提到的更改之外,根据你的 React 代码库,你可能还会发现其他一些更改。

 

值得一提的是,React 18 将不再支持 Internet Explorer,因为 React 18 现在依赖很多现代浏览器特性,如 Promise 或 Object.assign。鉴于微软将在今年 6 月 15 日停止对该浏览器的支持,React 和其他 JS 库也将停止对它的支持是很自然的。那些仍然需要支持 IE 的人们将不得不继续使用 React 17。

 

其余的更改与一些 React 行为的稳定性和一致性有关,不太可能影响你的代码库。不管怎样,你可以在此处找到完整更改列表。

并发的 React


并发渲染器是 React 渲染系统的一项幕后特性。它允许并发渲染,即同时在后台准备多个版本的 UI。这意味着更好的性能和更平滑的状态转换。

 

虽然并发似乎只是一个实现细节,但其实它是大多数新特性的动力源泉。事实上,只有当你使用其中一种特性(如 transition、Suspense 或流式 SSR)时,才会启用并发渲染。这就是为什么了解并发渲染的工作机制是非常重要的。

Transition


Transition是由并发渲染提供支持的新特性之一。它旨在与现有状态管理 API 一起使用,以区分紧急和非紧急状态更新。通过这种方式,React 知道哪些更新需要优先考虑,哪些更新需要在后台通过并发渲染准备。

 

要知道何时使用 transition,你必须更好地了解用户是如何与你的应交互的。例如,在字段中键入或单击按钮是用户期望立即获得响应的操作——响应可能是出现在文本字段中的一个值,或是要打开的某个菜单。但对于搜索、加载或处理数据(例如搜索栏、图表、过滤表等)这些事情,用户也会期望它们需要一些时间来完成。后者就是你使用 transition 的场景了。

 

你可以使用 useTransition()钩子来创建一个 transition。这个钩子返回一个函数来启动一个 transition,还有一个挂起的指示器来通知你 transition 的进度。


import { useTransition, useState } from "react";
const App = () => { const [isPending, startTransition] = useTransition(); const [value, setValue] = useState(0);
function handleClick() { startTransition(() => { setValue((value) => value + 1); }); }
return ( <div> {isPending && <Loader />} <button onClick={handleClick}>{value}</button> </div> );};
复制代码


你在 startTransition()回调中提交的任何状态更新都将被标记为 transition,从而使其他更新具有优先权。如果你不能使用这个钩子,还有一个单独的 startTransition()函数可用——虽然它不会通知你转换的进度。


import { startTransition } from "react";// ...startTransition(() => {  // Transition updates});// ...
复制代码

Suspense 更新


与 React Suspense 结合使用时,transition 的效果是最好的。由于一些改进,Suspense 现在可以很好地与并发渲染集成、在服务器上工作,并且可能很快支持 lazy()加载组件之外的用例。与 transition 一起使用时,Suspense 将避免隐藏现有内容。考虑以下示例:


import { Suspense } from "react";// ...
const App = () => { const [value, setValue] = useState("a"); const handleClick = () => { setValue("b"); };
return ( <> <Suspense fallback={<Loader />}> {value === "a" ? <A /> : <B />} </Suspense> <Button onClick={handleClick}>B</Button> </> );};
复制代码


在状态改变时,lazy()加载的组件将触发 Suspense,导致 fallback 元素的渲染。如果你将状态更改标记为一个 transition,React 将知道它应该在后台准备新视图,同时仍保持当前视图可见。


import { Suspense, useTransition } from "react";// ...
const App = () => { const [value, setValue] = useState("a"); const [isPending, startTransition] = useTransition(); const handleClick = () => { startTransition(() => { setValue("b"); }); };
return ( <> <Suspense fallback={<Loader />}> <div style={{ opacity: isPending ? 0.7 : 1 }}> {value === "a" ? <A /> : <B />} </div> </Suspense> <Button onClick={handleClick}>B</Button> </> );};
复制代码


现在,即使在处理 transition 时视图不会改变,你仍然可以使用过渡指示器来向用户提供反馈,例如设置容器不透明度。将上述改进与未来 Suspense 的新能力(与 lazy()加载的组件之外的异步任务一起使用)相结合,意味着 Suspense 将成为 React 最强大的特性之一。

服务端渲染改进


除了 Suspense 支持之外,React 的 SSR 方面还有很多其他变化。将 Suspense 与 SSR 流式传输和懒惰水合(lazy hydration)相结合,意味着你的服务端渲染应用将尽快水合并可用。不仅如此,零打包体积的服务端组件即将到来。它们目前处于试验阶段,但可能会在以后的次要版本中进入稳定状态。使用它们时,你将能减少提供给客户端的 JS 代码,甚至进一步优化 React 应用程序的性能和加载时间。

渐进采用


由于前文提到的 React 17 的多个更改,即使你的代码库很大,你也应该能够轻松地逐步采用 React 18。你不仅可以在应用程序的选定部分中使用新版本,还可以从 render()迁移到 createRoot(),来一步步选择加入新的特性和行为。最重要的是,即使使用的是 createRoot(),你仍然可以逐步采用并发渲染,因为它只有在你使用它的特性时才会启用。总体而言,迁移过程应该很顺利,甚至会是一桩乐事。

React 的未来


React 18 带来了许多新特性,你也可以看到一些即将出现的新事物。服务器组件、用于数据获取的 Suspense,和<Offscreen>组件渲染都是接下来的新特性的一部分。

 

React 正在与它的整个生态系统一起发展,我迫不及待地想看看接下来会发生什么!

 

原文链接:https://blog.openreplay.com/react-18-features-breakdown

2022 年 6 月 30 日 17:291519

评论

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

用例--学生智慧课堂扫码加入课堂

赝品

【LeetCode】K 个不同整数的子数组题解

Albert

算法 LeetCode 2月春节不断更

盘点和程序员相关的那些事,让你不再被割韭菜,薅羊毛!

孙叫兽

程序员 程序人生 高薪 话题讨论

流媒体传输协议之 RTP(下篇)

阿里云视频云

音视频 流媒体 rtp

如何检验人生的假设

熊斌

个人提升 2月春节不断更

/(ㄒoㄒ)/~~晚了

Nydia

区分重载和重写,轻松掌握 Java 多态

飞天小牛肉

Java 程序员 面试 后端 2月春节不断更

20210209—生活记录

VC

二月春节不断更

LeetCode题解:297. 二叉树的序列化与反序列化,DFS,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

产品经理训练营-作业四

胡小湖

「产品经理训练营」作业 04

🌟

产品经理 产品经理训练营 产品经理训练

数据结构与算法 - 排序1.冒泡排序

小马哥

Java 排序算法 数据结构与算法

Elasticsearch 精确匹配与全文搜索

escray

elastic 七日更 死磕Elasticsearch 60天通过Elastic认证考试 2月春节不断更

金融科技的碎片化思考(中)

曲水流觞TechRill

金融科技

【STM32】0.96寸OLED显示屏(7针SPI协议)软件模拟SPI

AXYZdong

硬件 stm32 2月春节不断更

产品经理训练营第0期-第四次作业

孙行者

第0期 第四周作业 极客大学产品经理训练营

面试官系列:讲讲快速失败和安全失败的区别?

后台技术汇

面试 2月春节不断更

产品经理训练营第四次作业

Jobs

架构11周

FreeOcean

不可用原因

用例文档练习

王一凡

产品经理

我在极客时间录课的故事(二):竭尽所能

李艺

我在极客时间录课的故事

第4周作业_贷款申请用例

园子

互联网金融 小额贷款 去中心化金融借贷系统开发

极客时间购买课程用例

Geek_a32093

HTTPS的安全性从何而来?

话题讨论 | 如何获得令人心动的前端offer

我是哪吒

程序员 面试 大前端 话题讨论 二月春节不断更

【得物技术】走进Web3D的世界(1) 画个立方体吧

得物技术

html html5 js WebGL 得物技术

产品训练营第四周作业

朱航

产品训练营 - 作业 4

简小一

第四章作业-用例

Wangyunnfei

业务流程与产品文档

王一凡

产品经理训练营

产品经理 - 第三周作业

LLL777

不再支持 IE,React 新特性详细解读_前端_Arek Nawo_InfoQ精选文章