跳至主内容

宣布推出 React Native 0.61 并带来 Fast Refresh 功能

· 1 分钟阅读
Dan Abramov
Facebook React 核心团队
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

我们很高兴地宣布 React Native 0.61 版本,它包含了一种全新的重载体验——我们称之为 Fast Refresh。

Fast Refresh

当我们向 React Native 社区征询常见痛点时,最突出的反馈之一是“热重载”(hot reloading)功能存在问题。它在函数组件上工作不可靠,经常无法更新屏幕,并且对拼写错误和其他错误不够健壮。我们了解到大多数人因为它太不可靠而选择关闭。

在 React Native 0.61 中,我们将现有的“实时重载”(保存时重载)和“热重载”功能统一为全新的“Fast Refresh”特性。Fast Refresh 从零开始构建,遵循以下核心原则:

  • Fast Refresh 全面支持现代 React,包括函数组件和 Hooks

  • Fast Refresh 能优雅地从拼写错误中恢复,并在必要时回退到完整重载

  • Fast Refresh 不会执行侵入式代码转换,因此足够可靠可作为默认选项

要查看 Fast Refresh 的实际效果,请观看以下演示视频:

欢迎您亲自尝试并分享使用感受!如果不需要该功能,可以在开发者菜单中关闭(iOS 按 Cmd+D,Android 按 Cmd+M 或 Ctrl+M)。开启/关闭操作即时生效,您可以随时调整。

以下是 Fast Refresh 的使用技巧:

  • 默认情况下,Fast Refresh 会保留函数组件(及 Hooks!)的本地状态

  • 若需在每次编辑时重置 React 状态,可在组件文件中添加特殊注释 // @refresh reset

  • Fast Refresh 总会重新挂载类组件且不保留状态,这确保了功能可靠性

  • 代码出错在所难免!Fast Refresh 会在保存文件后自动重试渲染。修复语法或运行时错误后,无需手动重载应用

  • 在编辑过程中添加 console.logdebugger 语句是高效的调试技巧

如在 Fast Refresh 中发现任何问题,请至 GitHub 提交报告,我们将及时跟进

其他改进

  • 修复了 use_frameworks! 的 CocoaPods 支持。0.60 版本默认集成 CocoaPods 的改动导致使用 use_frameworks! 的构建失败。该问题已在 0.61 修复,使 React Native 更易集成到需要动态框架的 iOS 项目中

  • 新增 useWindowDimensions Hook。这个新 Hook 能自动提供并订阅屏幕尺寸更新,在多数场景下可替代 Dimensions API

  • React 升级至 16.9 版本。此版本弃用了 UNSAFE_ 生命周期方法的旧名称,优化了 act 等特性。查看 React 16.9 博客文章获取自动化迁移脚本和详细信息

重大变更

  • 移除 React .xcodeproj 支持。在 0.60 版本中,我们通过 CocoaPods 引入了自动链接支持。同时已将 CocoaPods 集成到端到端测试流程中,确保从此有统一标准方式将 RN 集成至 iOS 应用。这意味着 React .xcodeproj 支持已被弃用,且该文件从 0.61 起正式移除。注意:若您已使用 0.60 的自动链接功能,则不受此影响。

致谢

感谢所有为 0.61 版本做出贡献的开发者!

完整更新内容请查看 0.61 更新日志