探索 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

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。

C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

See all articles