【React】React 18:新特性与重大更新解析


鑫宝Code

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础
💫个人格言: "如无必要,勿增实体"


文章目录

  • React 18:新特性与重大更新解析
    • 并发渲染
      • 什么是并发渲染?
      • 并发渲染的优势
      • 使用并发特性
    • 自动批处理
      • 什么是自动批处理?
      • 自动批处理的好处
      • 示例
    • Transitions API
      • 什么是 Transitions?
      • 使用 Transitions
      • Transitions 的优势
    • Suspense 的改进
      • Suspense 的新特性
      • 示例
    • 新的客户端和服务器端渲染 API
      • 客户端渲染 API
      • 服务器端渲染 API
    • 新的 Hooks
      • useId
      • useTransition
      • useDeferredValue
    • 严格模式的增强
      • 主要变化
      • 使用严格模式
    • 其他值得注意的更新
    • 升级到 React 18
    • 总结

React 18:新特性与重大更新解析

React 18 的发布为前端开发带来了一系列激动人心的新特性和重大改进。本文将深入探讨 React 18 的主要更新,帮助开发者了解新版本的核心变化和优势。
在这里插入图片描述

并发渲染

React 18 最显著的特性之一是引入了并发渲染机制。这是一个内部实现的改变,为 React 应用带来了显著的性能提升。
在这里插入图片描述

什么是并发渲染?

并发渲染允许 React 同时准备多个版本的 UI。这意味着 React 可以在后台准备新的 UI,而不会阻塞主线程,从而保持应用的响应性。

并发渲染的优势

  1. 提高应用性能:通过避免长时间阻塞主线程,应用可以保持流畅的用户体验。
  2. 更好的用户交互:React 可以在不影响当前用户交互的情况下,准备新的 UI。
  3. 灵活的更新优先级:开发者可以指定更新的优先级,确保重要的更新能够更快地呈现。

使用并发特性

要启用并发特性,需要使用新的 ReactDOM.createRoot() API:

import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

自动批处理

React 18 引入了自动批处理(Automatic Batching),这是一项重要的性能优化。
在这里插入图片描述

什么是自动批处理?

批处理是指 React 将多个状态更新组合成一次重新渲染,以提高性能。在 React 18 之前,批处理只在 React 事件处理程序中生效。现在,所有的更新都会自动批处理,无论它们来自哪里。

自动批处理的好处

  1. 减少渲染次数:多个状态更新被合并为一次渲染,提高了性能。
  2. 一致性:确保状态更新的行为在不同场景下保持一致。
  3. 简化代码:开发者不需要手动优化批处理。

示例

// React 18 之前
setTimeout(() => {setCount(c => c + 1);setFlag(f => !f);// 触发两次重新渲染
}, 1000);// React 18
setTimeout(() => {setCount(c => c + 1);setFlag(f => !f);// 只触发一次重新渲染
}, 1000);

Transitions API

Transitions API 是 React 18 引入的新概念,用于区分紧急和非紧急更新。

什么是 Transitions?

Transitions 允许开发者将某些更新标记为"可中断"的,这意味着这些更新可以被更紧急的更新打断。

使用 Transitions

React 18 提供了 useTransition hook 和 startTransition API 来使用 Transitions:

import { useTransition } from 'react';function App() {const [isPending, startTransition] = useTransition();const [count, setCount] = useState(0);function handleClick() {startTransition(() => {setCount(c => c + 1);});}return (<div>{isPending && <Spinner />}<button onClick={handleClick}>{count}</button></div>);
}

Transitions 的优势

  1. 提高用户体验:允许应用保持响应,即使在处理大量更新时。
  2. 优化性能:通过优先处理紧急更新,提高应用的整体性能。
  3. 更好的加载状态管理:提供了更细粒度的加载状态控制。

Suspense 的改进

React 18 对 Suspense 组件进行了重大改进,使其更加强大和灵活。

Suspense 的新特性

  1. 服务器端渲染支持:Suspense 现在可以在服务器端使用。
  2. 流式 SSR:允许逐步向客户端发送 HTML,提高首次加载性能。
  3. 并发渲染集成:Suspense 现在与并发渲染无缝集成。

示例

import { Suspense } from 'react';function App() {return (<Suspense fallback={<Loading />}><SomeComponent /></Suspense>);
}

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

React 18 引入了新的渲染 API,以支持并发渲染和改进的服务器端渲染。

客户端渲染 API

  • ReactDOM.createRoot():用于创建并发模式的根节点。
  • root.render():替代 ReactDOM.render(),用于渲染应用。
import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

服务器端渲染 API

  • renderToPipeableStream():用于流式 SSR。
  • renderToReadableStream():用于 Web Streams API。

这些新 API 提供了更好的性能和更灵活的服务器端渲染选项。

新的 Hooks

React 18 引入了几个新的 Hooks,进一步增强了函数组件的能力。

useId

useId 是一个用于生成唯一 ID 的 Hook,特别适用于可访问性属性。

function NameFields() {const id = useId();return (<div><label htmlFor={id + '-firstName'}>First Name</label><input id={id + '-firstName'} type="text" /><label htmlFor={id + '-lastName'}>Last Name</label><input id={id + '-lastName'} type="text" /></div>);
}

useTransition

前面已经介绍过,用于标记非紧急更新。

useDeferredValue

useDeferredValue 允许延迟更新某些不太重要的部分。

const deferredValue = useDeferredValue(value);

严格模式的增强

React 18 的严格模式引入了新的检查和警告,帮助开发者发现潜在问题。

主要变化

  1. 组件的重复挂载:用于发现副作用清理的问题。
  2. 新的警告和错误检查:帮助开发者遵循最佳实践。

使用严格模式

import { StrictMode } from 'react';function App() {return (<StrictMode>{/* 你的应用组件 */}</StrictMode>);
}

其他值得注意的更新

  1. 改进的错误处理:更好的错误边界和错误报告。
  2. 新的 JSX 转换:不再需要显式导入 React。
  3. 改进的类型检查:更好的 TypeScript 支持。

升级到 React 18

升级到 React 18 需要注意以下几点:

  1. 更新 React 和 ReactDOM 到 18 版本。
  2. ReactDOM.render 替换为 ReactDOM.createRoot
  3. 审查和更新第三方库。
  4. 逐步采用新特性,如并发模式和 Suspense。

总结

React 18 带来了一系列重要的更新和新特性,包括并发渲染、自动批处理、Transitions API、改进的 Suspense 支持、新的渲染 API 以及新的 Hooks。这些更新不仅提高了 React 应用的性能,还为开发者提供了更强大和灵活的工具来构建现代 Web 应用。

通过采用这些新特性,开发者可以创建更加流畅、响应迅速的用户界面,同时简化开发过程。然而,升级到 React 18 需要谨慎进行,确保与现有代码和第三方库的兼容性。

随着 React 生态系统不断发展,我们可以期待看到更多基于这些新特性的创新应用和库。React 18 无疑为 React 的未来发展奠定了坚实的基础,为前端开发开辟了新的可能性。

End

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56993.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux系统下串口AT指令控制EC20连接华为云物联网平台

一、前言 在当今万物互联的时代背景下&#xff0c;物联网技术的快速发展极大地推动了智能化社会的构建。作为其中的关键一环&#xff0c;设备与云端平台之间的通信变得尤为重要。本文介绍如何在Linux操作系统环境下&#xff0c;利用串口通信来实现EC20模块与华为云物联网平台的…

【JavaEE】【多线程】线程池

目录 一、线程池二、ThreadPoolExecutor类讲解2.1 构造方法2.1.1 corePoolSize和maximumPoolSize2.1.2 KeepAliveTime和unit2.1.3 workeQueue2.1.4 threadFactory2.1.5 handler 三、简易构造线程池四、自己实现一个简单线程池 一、线程池 线程池&#xff1a;线程池可以简单理解…

Vue.js 学习总结(11)—— Vue3 Hook 函数实战总结

前言 在 Vue 3 中&#xff0c;Hook 函数是一种特殊的函数&#xff0c;用于封装可重用的逻辑和状态管理。Hook 函数允许你在 Vue 组件中提取和复用逻辑&#xff0c;而不是将所有逻辑都放在组件的选项对象中。它们可以帮助你更好地组织代码&#xff0c;提高代码的可维护性和可测…

Elasticsearch 解析:倒排索引机制/字段类型/语法/常见问题

Elasticsearch 是一个分布式的开源搜索引擎&#xff0c;广泛用于全文搜索、分析和数据存储。它基于 Apache Lucene 构建&#xff0c;支持 RESTful 风格的 API&#xff0c;使得开发者能够高效地存储和检索数据。本文将详细讲解 Elasticsearch 的基本原理&#xff0c;特别是其倒排…

网页上的视频怎么下载下来?三种方法

分享三个简单好用的网页视频下载工具&#xff0c;值得使用&#xff01; 1.IDM IDM 是一款可以提高下载速度达5倍的工具&#xff0c;同时具有恢复、调度和组织下载的功能。如果由于网络问题或意外的电源中断&#xff0c;程序将恢复未完成的下载。 IDM 还具有一个完全功能的站点…

【Flask】一、安装与第一个测试程序

目录 Flask简介 安装Flask 安装pip&#xff08;Python包管理器&#xff09; 使用pip安装Flask 验证安装 创建Flask程序 创建应用 运行 访问测试 Flask简介 Flask是一个用Python编写的轻量级Web应用框架。它被设计为易于使用和扩展&#xff0c;使其成为构建简单网站或复…

【经典论文阅读11】ESMM模型——基于贝叶斯公式的CVR预估

传统的CVR模型&#xff08;也就是直接对conversion rate建模的模型&#xff09;在实际应用中面临两个问题&#xff08;样本选择偏差与数据稀疏性问题&#xff09;。为了解决这两个问题&#xff0c;本文提出ESMM模型。该模型巧妙地利用用户行为序列去建模这个问题&#xff0c;从…

解决SpringBoot项目启动错误:找不到或无法加载主类

如何解决SpringBoot项目的“找不到或无法加载主类”启动错误 在开发SpringBoot应用时&#xff0c;经常可能会遇到一个启动错误&#xff1a;“错误&#xff1a;找不到或无法加载主类 com.example.controller.demo.DemoApplication”。本文将介绍三种解决这一问题的方法。 方法…

微信小程序中点击搜素按钮没有反应,可能是样式问题(按钮被其他元素覆盖或遮挡)

文章目录 1. 确认 bindtap 绑定在正确的元素上2. 检查是否有遮挡或重叠元素3. 检查 this 上下文绑定问题4. 清除微信小程序开发者工具的缓存5. 用微信开发者工具查看事件绑定6. 确保 handleSearch 没有拼写错误进一步调试 1、searchResults.wxml2、searchResults.wxss3、search…

偷懒总结篇|贪心算法|动态规划|单调栈|图论

由于这周来不及了&#xff0c;先过一遍后面的思路&#xff0c;具体实现等下周再开始详细写。 贪心算法 这个图非常好 122.买卖股票的最佳时机 II(妙&#xff0c;拆分利润) 把利润分解为每天为单位的维度&#xff0c;需要收集每天的正利润就可以&#xff0c;收集正利润的区间…

[C高手编程] 进程编程与IPC

&#x1f496;&#x1f496;⚡️⚡️专栏&#xff1a;C高手编程-面试宝典/技术手册/高手进阶⚡️⚡️&#x1f496;&#x1f496; 「C高手编程」专栏融合了作者十多年的C语言开发经验&#xff0c;汇集了从基础到进阶的关键知识点&#xff0c;是不可多得的知识宝典。如果你是即将…

基于SSM+小程序的旅游社交登录管理系统(旅游4)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 ​ 本旅游社交小程序功能有管理员和用户。管理员有个人中心&#xff0c;用户管理&#xff0c;每日签到管理&#xff0c;景点推荐管理&#xff0c;景点分类管理&#xff0c;防疫查询管理&a…

k8s 二进制部署安装(一)

目录 环境准备 初始化操作系统 部署docker 引擎 部署 etcd 集群 准备签发证书环境 部署 Master01 服务器相关组件 apiserver scheduler controller-manager.sh admin etcd 存储了 Kubernetes 集群的所有配置数据和状态信息&#xff0c;包括资源对象、集群配置、元数据…

阿里云镜像源无法访问?使用 DaoCloud 镜像源加速 Docker 下载(Linux 和 Windows 配置指南)

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f343; vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode&#x1f4ab; Gitee &#x1f…

银河麒麟V10系统下libopenblas.so.0和libllmlmf库的安装

1、当前linux服务器系统是银河麒麟V10&#xff0c;具体的内核和cpu型号如下&#xff1a; 2、使用:uname -a来进行查询 Linux localhost.localdomain 4.19.90-89.16.v2401.ky10.x86_64 #1 SMP Sat Sep 14 13:09:47 CST 2024 x86_64 x86_64 x86_64 GNU/Linux 3、在部署QT开发的应…

高清 MV 无字幕视频素材

在当下的短视频和自媒体时代&#xff0c;高清无字幕的视频素材无疑是创作者们的“得力助手”。不管是用于剪辑情感励志视频、制作搞笑段子&#xff0c;还是创作风景航拍视频&#xff0c;优质的素材库都能让你的创作如虎添翼。今天&#xff0c;我就为大家介绍几个海外的高质量素…

如何使用Qlik Sense Util

Qlik Sense Util 是 Qlik Sense 的一个实用工具&#xff0c;它可以帮助管理员执行各种配置和维护任务。 以下是使用 Qlik Sense Util 工具的一些基本步骤&#xff1a; 1. **运行 QlikSenseUtil.exe**&#xff1a; - 在中心节点上&#xff0c;打开文件资源管理器并导航到 C:…

服务器作业2

架设一台NFS服务器&#xff0c;并按照以下要求配置 关闭防火墙 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 配置文件设置&#xff1a; [rootlocalhost ~]# vim /etc/exports 1、开放/nfs/shared目录&#xff0c;供所有用户查询资料 共享…

Scott Brinker:Martech App 的未来在中小企业和中端市场

中端市场营销支出增加 Product Hunt网站上每周发布的与营销技术相关的产品数量和TechCrunch网站上发布的新融资公告数量持续增加。最近&#xff0c;很多公司都在借助OpenAI、Azure和AWS的新API&#xff0c;赶上生成式人工智能的浪潮。可以肯定的是&#xff0c;有很多重复的想法…

IDEA集成AI的DevAssist插件使用指南

DevAssit使用背景&#xff0c;这类工具通常旨在帮助开发者提高效率&#xff0c;简化开发流程。这类工具包括但不限于&#xff1a; 代码编辑器插件&#xff1a;提供自动补全、代码提示等功能。 构建工具&#xff1a;帮助自动化构建过程。 调试工具&#xff1a;提供更强大的调试功…