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中文网其他相关文章！
