探索 React 功能、弃用和重大更改-js教程-PHP中文网

首页

web前端

js教程

探索 React 功能、弃用和重大更改

Barbara Streisand

Dec 10, 2024 pm 08:22 PM

Exploring React Features, Deprecations, and Breaking Changes

React 19 现已推出，带来了大量新功能、改进和突破性更改。此版本重新定义了开发人员处理状态管理、表单和服务器端渲染的方式，同时弃用了旧版 API。如果您打算升级，请系好安全带，踏上变革之旅。本指南将引导您了解 React 19 的亮点，并提供确保顺利过渡的提示。

React 19 的亮点

新功能

1. Actions 和 useActionState

startTransition API 现在支持异步函数，称为“操作”。操作可以管理状态更新、处理 fetch() 等副作用，并包括错误处理。它们通过协调状态更新和 UI 渲染来简化转换。

新的 useActionState 钩子 通过提供对 Action 状态（包括挂起状态和最终状态）的访问来补充这一点。它接受用于粒度控制的减速器，使其成为表单交互和复杂状态流的重要工具。

2. 使用 useOptimistic 进行乐观更新

useOptimistic 使开发人员能够在转换过程中设置临时状态更改，从而提供更流畅的用户体验。异步操作完成后，状态会自动恢复或更新。

3. 使用API

React 19 引入了 use API，它允许在渲染期间读取 Promise 或上下文。这可以简化服务器数据获取工作流程，但存在只能在渲染函数中调用的限制。

4. ref 作为 Prop

您现在可以直接将 refs 作为 props 传递，从而无需使用forwardRef。此更改简化了组件构成，并使引用的使用更加直观。

5. 增强悬念

Suspense 现在支持同级预热，当同级挂起时立即提交后备组件。此增强功能提高了数据密集型应用程序的性能和用户体验。

React DOM 客户端增强

1. 表单操作

React 中的表单通过

，能够更好地与 useFormStatus 集成。提交表单会自动重置不受控制组件的状态。

2. 文档元数据和资源优化

React 19 原生支持渲染文档元数据，例如

或组件树中的标签。此外，预初始化、预加载和预连接等新 API 改进了资源发现和加载时间。 <h4> 3. <strong>异步脚本</strong> </h4> <p>您现在可以在组件树中的任何位置渲染异步脚本。 React 处理排序和重复数据删除，简化第三方脚本集成。</p> <hr> <h3> <strong>React DOM 服务器</strong> </h3> <h4> 1. <strong>新的预渲染 API</strong> </h4> <p><strong>prerender</strong> 和 <strong>prerenderToNodeStream</strong> API 通过支持 Node.js 等流环境来增强服务器端渲染 (SSR)。这些 API 在生成 HTML 之前等待数据加载，使 SSR 更加健壮。</p> <h4> 2. <strong>稳定的 React 服务器组件 (RSC)</strong> </h4> <p>服务器组件现已稳定，允许库将 React 19 作为对等依赖项。这与全栈 React 架构保持一致，并支持与 Next.js 等框架无缝集成。</p> <hr> <h3> <strong>弃用和重大变更</strong> </h3> <h4> <strong>弃用</strong> </h4> <ul> <li> <strong>element.ref 访问</strong>：已弃用，转而使用 element.props.ref。</li> <li> <strong>react-test-renderer</strong>：记录弃用警告；考虑迁移到 React 测试库。</li> <li> <strong>旧版 API</strong>：已正式弃用 contextTypes、函数的 defaultProps 和字符串引用等 API。</li> </ul> <h4> <strong>重大变更</strong> </h4> <ol> <li><p><strong>JSX 转换要求</strong><br> 新的 JSX 转换在 React 19 中是强制性的。这使得像 refs 这样的功能能够作为 props 并提高整体性能。</p></li> <li><p><strong>错误处理更改</strong><br> 未捕获的错误现在报告给 window.reportError，而边界捕获的错误则通过 console.error 记录。 onUncaughtError 和 onCaughtError 等新方法允许自定义。</p></li> <li> <p><strong>删除的 API</strong></p> <ul> <li> <strong>ReactDOM.render 和 ReactDOM.Hydrate</strong>：已替换为 ReactDOM.createRoot 和 ReactDOM. HydroRoot。</li> <li> <strong>函数的defaultProps</strong>：使用ES6默认参数。</li> <li> <strong>旧版上下文</strong>：使用现代 contextType API。</li> <li> <strong>react-dom/test-utils</strong>：替换为 React 核心的 act。</li> </ul> </li> <li><p><strong>删除了 UMD 版本</strong><br> 不再支持 UMD 构建。使用基于 ESM 的 CDN 来使用脚本标签，例如 esm.sh。</p></li> </ol> <hr> <h2> <strong>准备升级</strong> </h2> <h3> 1. <strong>首先升级到React 18.3</strong> </h3> <p>React 18.3 引入了针对 React 19 中删除的 API 的弃用警告。此中间步骤有助于在全面升级之前识别潜在问题。</p> <h3> 2. <strong>Codemod 和迁移工具</strong> </h3> <p>使用 React codemods 来自动执行重复更新，例如重构已弃用的 API 和调整 TypeScript 类型。</p> <h3> 3. <strong>TypeScript 调整</strong> </h3> <p>React 19 包含更严格的 TypeScript 类型。例如：</p> <ul> <li> ReactChild → React.ReactElement | ReactChild → React.ReactElement |数量 |细绳 </li> <li> VoidFunctionComponent → FunctionComponent </li> </ul> <p>重构您的代码以与这些更新保持一致。</p> <hr> <h2> <strong>平稳过渡的技巧</strong> </h2> <ul> <li> <strong>利用严格模式</strong>：React 19 引入了更严格的最佳实践执行。在严格模式下运行您的应用程序可能会发现隐藏的错误。</li> <li> <strong>尽早并经常进行测试</strong>：考虑到重大变化，彻底的测试至关重要。从react-test-renderer过渡到React测试库确保了与并发渲染的兼容性。</li> <li> <strong>检查服务器渲染</strong>：如果您的应用使用 SSR，请针对 React 19 的新预渲染 API 进行测试，并确保服务器组件的顺利集成。</li> </ul> <hr> <h2> <strong>为什么 React 19 很重要</strong> </h2> <p>React 19 是一次重大飞跃，改善了开发人员体验，同时为现代应用程序提供了强大的功能。无论您对异步操作、改进的 Suspense 还是服务器端渲染增强感到兴奋，此版本都包含可帮助开发人员构建更快、更具弹性的应用程序的功能。</p> <p>准备好潜水了吗？从 React 19 升级指南开始，探索完整的发行说明。</p> <p>编码愉快！？</p>

以上是探索 React 功能、弃用和重大更改的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7892

Java教程

1651

CakePHP 教程

1411

Laravel 教程

1302

PHP教程

1248

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。