【译】React 19：你需要了解的内容都在这里

跟上 React 19 及其新特性的步伐，例如升级后的编译器、协调改进和严格模式检查。准备迎接下一个重大的 React 发布！

作为 React 开发者，我们跟进最新的框架更新至关重要，但也是具有挑战性的。

这份对 React 19 的全面指南旨在通过为你提供顺利过渡到最新版本 React 所需的一切知识来减轻这一挑战。

你将了解到即将推出的新功能、编译器增强、协调和渲染进步、开发者体验改进等等。我们还将涵盖你需要注意的已弃用 API 和重大变化，以及重构和开始在Canary Channel进行测试的最佳实践。

React 19 简介：全面概述

什么是 React 19？

React 19 是React JavaScript 库的下一个重大版本发布，用于构建用户界面。它在现有的 React 代码库基础上引入了新功能和改进，同时尽可能保持向后兼容性。

关于 React 19 的一些关键信息：

• 它仍处于开发阶段，尚未确定官方发布日期。React 团队的目标是在 2023 年发布。
• 它将增加对新 Web 平台API的支持，如replaceText方法。
• 重点是“渐进增强”——提高性能和开发者体验的特性，但不是必需的。
• 对于大多数 React 应用程序来说，升级应该相对顺利。但计划对代码库进行一些潜在的重大变更。

  期待 React 19 的发布：React 19 何时发布？

  React 19 仍处于早期开发和测试阶段。目前尚未公开确定确切的发布日期。

根据 2021 年的 React Conf 和官方React博客的公告，React 19 很可能会在 2023 年发布。React 团队希望确保向后兼容性，并为社区提供准备应对潜在的重大变化的时间。

最初，React 19 将作为实验性的Canary Channel的测试版发布，以供早期测试和反馈。这种方法有助于在全面发布之前发现错误并确保稳定性。

因此，尽管确切的日期尚未确定，但请在2023年期间留意 React 19 测试版的发布！

React 19 的突出特性

React 19 中一些突出的功能和改进包括：

• React 编译器——将 React 代码转换为普通 JavaScript，以提高启动性能。这是React在底层处理方式的重大变化。
• 自动批处理——批处理状态更新以提高 UI 响应性。一个很好的渐进增强。
• replaceText 渲染属性——允许替换文本而不重新渲染整个组件。用于优化的有用功能。
• Actions API——用于更好地处理组件中异步逻辑的新内置 API。旨在简化复杂组件。
• Strict Mode 4——新的严格模式检查，如检测事件处理程序的不一致类型。有助于尽早发现错误。

等等！React 19 正在成为一个重大的发布版本。

为重大变更做好准备

React 团队仍在最终确定 19 版本中可能会有哪些变化。但开发者可以通过以下方式做好准备：

• 关注 React 博客文章和潜在的重大变更的文档
• 首先在非关键项目上尝试 React 19 测试版
• 提前更新 React 技能和工具
• 关注stability 和 release的公告

一些可能会出现重大变化的关键领域包括错误边界、生命周期方法 API，以及从渲染属性到钩子的变化。更多细节将在发布过程中公布。但 React 团队致力于尽可能避免不必要的重大变更。

总体而言，React 19 是一个令人兴奋的更新，带来了新的能力。通过一些规划和测试，大多数应用程序的升级应该会顺利进行。React 团队正在努力平衡新功能和稳定性，帮助开发者构建出色的用户体验。

React 的演变：React 19 中的编译器增强

React 19 引入了一款全新的编译器，旨在优化捆绑大小并改善运行时性能。让我们来探讨一些关键的增强功能。

全新的 React 编译器介绍

React 团队从头开始重构了编译器，以提高速度并生成更少的代码。一些亮点包括：

• 完全静态分析用于代码优化
• 粒度包装以消除未使用的导出项
• 将常见模式编译为最佳代码

这些编译器的先进功能旨在提高 React 开发者的生产力。

使用 React 19 实现更快的启动时间

React 19 可以实现多达 2 倍快速的组件初始化和挂载速度。这将带来更为灵敏的用户体验：

• 代码分割支持避免加载未使用的代码
• 延迟hydration使得 UI 首先加载
• 针对首屏内容的优先渲染

使用 React 19的页面从初始加载开始就会感觉更加响应迅速。

代码大小减小：优化效率

React 19 的编译器输出可以比当前 React 版本小多达 33%。具体的减小包括：

• 消除未使用的模块导出
• 修剪不可到达的代码路径
• 最小化运行时检查

这直接降低了 React 应用的网络资源使用。

增强的Memoization（记忆化）技术

最后，React 19 扩展了Memoization（记忆化）功能，以获得进一步的性能提升：

• 组件的粒度化Memoization（记忆化）
• 可定制的相等性检查
• 使用 React.memo 进行自动Memoization`（记忆化）

开发人员可以优化Memoization（记忆化）的组件，以获得最大的好处。
新的 React 编译器解锁了更快的应用程序、更小的捆绑大小和先进的优化。这些能力使 React 更适应未来，同时保持了完全向后兼容。

协调和渲染：React 19 的进步

React 的协调过程决定了需要对 DOM 进行什么样的更改以反映状态的变化。React 19 引入了改进，使得这个过程更加快速。

通过粒度更新减少重新渲染

React 现在更细粒度地比较状态变化，以避免不必要的重新渲染。例如，以前更新数组会触发重新渲染，即使实际数组内容没有变化。现在 React 进行浅比较，只有引用发生变化时才重新渲染。

这意味着组件将会更少地重新渲染，从而带来更好的性能。开发人员应确保正确地对组件和派生数据进行记忆化，以充分利用这些改进。

接受异步渲染

React 19 扩展了并发模式的增强功能，将工作分成片段，在它们之间返回给浏览器。这避免了在执行工作时阻塞视觉更新。

startTransition 等功能允许开发人员显式地标记非紧急更新，以异步处理。React 然后将渲染分成片段，保持 UI 的响应性。

React hydration作用改进

hydration是指从服务器渲染的 HTML 初始化 React组件。React 19 引入了一个新的hydration API 来简化这个过程。

它不再需要维护单独的服务器和客户端渲染逻辑。新的 API 在hydration期间跳过不匹配，以避免崩溃，提高可靠性。

生命周期方法更新

传统的 componentWillReceiveProps 生命周期方法现在将记录一个弃用警告，鼓励使用 getDerivedStateFromProps。

随着 React 向更可预测行为的推进，这个方法最终可能会被移除。开发人员应将现有逻辑迁移到 getDerivedStateFromProps 或其他方法，如 shouldComponentUpdate。

通过新的严格模式检查增强开发人员体验

React 19 引入了额外的严格模式检查，旨在更早地在开发过程中捕捉常见错误和潜在问题。这些改变有助于强制执行实践，以防止后续意外行为。

在 React 19 中实现严格的相等性检查

React 现在在比较某些生命周期方法中的值时使用严格相等检查（===），而不是抽象相等（==）。这种改变减少了由非严格相等检查引起的意外行为的几率。

例如，0 == false 在抽象相等中评估为 true，这可能会导致问题。严格相等检查 0 === false 正确评估为 false。这可以防止潜在的错误。

Effect清理时机与一致性

React 19 在严格模式下增加了检查，以确保清理效果在卸载时始终按一致的方式执行。这可以防止由于Effect未能正确清理而引发的问题。其动机在于在开发过程中更早地暴露这些不一致性。

检测冲突引用

React 现在可以在严格模式下检测到冲突的引用——当两个引用指向同一个组件实例时。这有助于防止意外操纵 DOM 节点导致的错误。

例如，将多个引用附加到同一实例可能会导致竞争条件。严格模式的检查可以暴露此问题，以防止潜在的错误。

为了额外的安全性而双重调用效果

在开发构建中，React 严格模式现在会双重调用效果。这样做是为了验证效果在调用两次时的行为是否完全相同——以检测可能未发生的问题。

双重调用使得 React 可以捕捉到效果清理逻辑中的不一致性，进一步避免了由未能正确清理的效果引起的意外后果。这在开发中增加了额外的保护层。

React 19：从Render-Props 到 Hooks

理解Hooks相比Render-Props 的优势

与Render-Props 相比，React Hooks提供了一种更简洁的方式来管理状态和副作用。一些Hooks的主要优势包括：

• 更易读和易管理的代码：Hooks允许您根据相关功能将复杂组件拆分为更小的函数，而不是基于状态 vs 生命周期方法进行拆分。这使得代码更易读和易于维护。
• 更好的状态逻辑重用：Hooks允许您从组件中提取状态逻辑，以便可以独立测试并在其他组件中重用。使用渲染属性，重用逻辑更加困难。
• 避免“包装地狱”：嵌套的渲染属性可以创建深度嵌套的树结构，难以阅读。Hooks通过允许您直接使用状态和副作用而不进行包装来避免这种“包装地狱”。
• 灵活的组合：Hooks在不同的状态逻辑如何组合在一起方面提供了灵活性。这有助于减少重复，并比渲染属性更好地分离关注点。

重构最佳实践

当将 React 组件从使用渲染属性转换为Hooks时，以下是一些最佳实践：

• 从小处开始：开始时，一次只转换一个渲染属性，而不是一次重写所有内容。这样做使过程更加逐步化。
• 添加Hooks lint 规则：启用 React Hooks lint 规则，以在重构过程中捕获错误。这有助于避免错误。
• 提取自定义Hooks：对于复杂的渲染属性逻辑，提取自定义Hooks以封装行为。这样可以保持组件的清洁。
• 更新测试：随着组件的变化，更新现有测试或添加新测试以确保正确的覆盖。测试Hooks需要使用包装组件。
• 处理清理：在新的Hooks数据流中正确处理渲染属性的效果清理。这样可以避免内存泄漏。

Hooks实际应用示例

Hooks提供了一种更简单的方式来实现许多常见场景，而这些场景以前可能需要使用渲染属性：

• 数据获取 - useDataApi 自定义Hooks处理调用 API 端点、管理状态和处理错误。
• 鼠标跟踪 - useMousePosition ``Hooks跟踪鼠标移动，无需使用渲染属性。
• 动画 - useSpring Hooks管理动画过渡和序列，无需复杂的包装。
• 表单处理 - 自定义输入，如 useFormInput，在可重用的Hooks中封装了有状态的行为。

这些示例演示了Hooks通过减少嵌套和抽象与渲染属性相比提供了常见用例的简化方法。

Canary Channel：与 React 19 保持领先

Canary Channel简介

Canary Channel是一个预发布频道，允许开发人员在官方发布之前测试 React 的新功能和更新。它就像“煤矿中的金丝雀”，提前警示任何新版本的 React 存在的问题，以防它们影响更广泛的受众。

通过选择加入Canary Channel，开发人员可以在 React 19 还在开发中时提前获取访问权限。该频道将包括偶尔发布的最新正在进行的更改版本。

如何访问和使用Canary Channel

要开始使用Canary Channel，您需要安装Canary版本的 React：

使用 npm：

npm install react@canary react-dom@canary

或者如果您使用 Yarn：

yarn add react@canary react-dom@canary

然后您可以在应用程序中导入并使用 React 19 的功能。请确保进行彻底测试，因为Canary 构建可能包含未完成的代码。

最好设置一个单独的测试环境，而不是更新您现有的生产依赖项。这样可以在不干扰您的实时应用程序的情况下提供反馈。

在Canary Channel进行测试的好处

通过Canary Channel提前测试 React 19 具有以下几个优点：

• 提前了解即将推出的功能和更改
• 提前发现并报告错误以改进稳定版本
• 为即将到来的重大更改做好应用程序准备
• 提供反馈，帮助塑造最终的 React 19 发布
• 了解最新的 React 发展动态

通过参与这些早期的Canary Channel构建，您可以帮助改进 React，并为未来做好准备。

Canary Channel最佳实践

在使用Canary Channel时，请记住以下最佳实践：

• 使用一个单独的测试环境，不要更新生产依赖项
• 在将新功能和更新集成到关键路径之前彻底测试
• 预期偶尔出现的破坏性更新，因为正在进行的工作中会出现更改
• 注意废弃警告，以做好迎接重大更改的准备
• 向 React 团队提供可操作的错误报告和反馈
• 不要在已经报告的 bug 上再次提出问题
• 理解实验性功能可能会发生大幅更改或被移除

遵循这些提示将会使您在Canary Channel中测试 React 19 的体验更加顺畅。欢迎您分享您的想法！

React 19 中的废弃 API 和重大更改

React 19 通过废弃传统的 API 和特性引入了一些重大更改。虽然会带来一定的干扰，但这些更改为提升性能、开发者体验和未来创新奠定了基础。

应对重大更改的方法

以下是处理 React 19 中重大更改的一些技巧：

• 查看 React 19 RC 变更日志，了解全部废弃和重大更改的完整列表。注意其中会影响到你的代码库的内容。

• 利用早期 React 版本中的废弃警告，主动查找废弃的用法。

• 考虑尝试 React 19 的 codemod，自动迁移一些废弃模式。

• 建立一个分阶段的环境，测试升级并在部署到生产环境之前识别问题。

• 依赖于 React 强大的社区，获取有关迁移的帮助和最佳实践。

  传统功能及其替代方案

  以下是一些关键的传统 API 及其现代化的替代方案：

• 传统的上下文 - 使用 createContext 和 useContext 替代。

• Ref strings - 替换为 createRef 和 useRef。

• ReactTestUtils - 迁移到 @testing-library/react 以获取改进的测试。
  其他已移除的模块如 react-addons-test-utils - 寻找社区的替代方案。
  查看完整的废弃列表以获取更多细节。

为平稳过渡做计划

• 审查你的代码库，列出可能受影响的依赖和集成。
• 优先更新根组件的依赖项。
• 在路线图中安排专门的升级迭代。
• 首先在预发布/分阶段环境中进行升级。
• 在升级生产环境后监控关键指标，以捕捉任何问题。

利用 React 的语义版本和长期的废弃周期，使每个重大更改都成为改进应用程序的机会！

结论：拥抱 React 19

React 19 的创新

React 19 引入了一些令人兴奋的改进，将使许多 React 开发者受益。主要亮点包括：

• 新的 React 编译器：升级后的编译器引入了跳过模式和选择性水合等性能优化，以帮助应用程序更快地加载。
• 协调改进：像 startTransition API 这样的更新通过将工作分成块使复杂的 UI 更加响应。
• 严格模式检查：新的严格相等性检查和废弃的 API 删除确保应用程序遵循最佳实践。
• Hydration和 SSR 更改：Fiber 树复制和 useId Hooks更好地支持服务器渲染的应用程序。

总的来说，React 19 专注于提升生产力、性能和 DX，用于构建复杂的 Web 应用程序。

React 开发者的前路

随着 React 19 的发布，开发者应熟悉新功能，如编译器，并开始迁移任何废弃的代码。随着 React 的不断发展，保持更新至关重要。

未来要记住的一些事情：

• React 20 将推出新的 Profiler API 用于性能跟踪。通过阅读文档做好准备。
• 未来的 React 版本将继续增强严格模式。即使暂时不执行，也要采用严格模式检查。
• React 团队计划继续改进 DX、DevTools、测试等。订阅博客以获取更新。

尽管 React API 保持稳定，但增量改进是持续的。拥抱新的 React 版本，构建更快、更可扩展的应用程序。

其他资源和学习

有关 React 19 和 React 未来的更多信息，请查阅以下资源：

• React 博客 - 官方公告和发布详情
• React Conf 2021 视频 - React 核心团队关于新功能的概述
• React 文档 - 有关 startTransition 和 Hydration 等升级功能的指南

React 社区还会发布关于发布的相关内容。搜索 YouTube、Twitter 等，找到分享 React 19 相关技巧和评论的 React 开发者。