关于 React Native 0.61 集成的 “Fast Refresh” 功能
React Native 0.61 版本已正式发布, 其中集成了一种名为 “Fast Refresh(快速刷新)” 的全新的实时重载功能。
译者注:由于个人水平有限,翻译可能有不准确的地方,望谅解。如果发现有翻译不准确的地方,可以留言或是于Github上提交:react-native-docsZh。
译者注:由于译者本身缺乏对于原有的 hot reloading 与 live reloading 原理的深入认识,导致部分内容翻译并不准确(斜体标注),如您知晓,请留言告知!
Fast Refresh
在 React Native 社区中,众多开发者提交的常见痛点之一就是 “hot reloading(热重载)” 功能实用性极差,它无法兼容众多的功能组件,导致无法实时刷新,同时其 debug 功能几乎无法正常使用,错误及警告页面几乎没有可读性。导致大量的开发者都关闭了“hot reloading”。
在新发布的 React Native 0.61 中,我们将现有的 “live reloading”(保存时重载)和“hot reloading”(热重载)功能统一为 “Fast Refresh(快速刷新)” 的新功能。 快速刷新作为一个完全重构的 “新功能”,其遵循以下原则:
- Fast Refresh(快速刷新)完全支持 React, 包括组件及 Hooks.
- Fast Refresh(快速刷新)将在发生输入错误或是其他错误修复后 自动恢复刷新机制 , 并在需要时自动退回到 full reload(完全重载)的状态。
- Fast Refresh(快速刷新)不再以执行强制代码转换的原理进行工作 这将有效提升本功能的可靠性,完全可以默认开启本功能。
要了解 Fast Refresh(快速刷新)的工作流程,请观看下方视频(译者注:需要外网支持)
请试试看,反馈您的意见!您可以随时在开发者菜单中将其开启或关闭(开启开发者菜单的快捷键在 iOS 上为 Cmd + D,Android 上为 Cmd + M 或 Ctrl + M ),开启或关闭都将即时生效,如您所愿。
以下是一些使用说明:
- Fast Refresh(快速刷新)在默认情况下会在函数组件 (也包括 Hooks) 中保留 React 程序中的 local state 对象。
- 如果您需要在每次编辑时重置 React state 对象,则可以在带有该组件的文件中添加特殊注释:
// @refresh reset
。 - Fast Refresh(快速刷新)在每次重载类组件时都将移除现有的 state 对象数据,以此确保其能顺利运行。
- 无须担心编写代码时的疏漏! Fast Refresh(快速刷新)将在保存文件操作后自动尝试重新加载渲染,修复语法错误或代码逻辑错误后,应用亦将自动尝试重新加载渲染。
- 在编辑过程中适当的添加
console.log
或debugger
将有效帮助您进行调试。
请随时在 GitHub 上提交有关 Fast Refresh 的任何问题,我们将即刻跟进反馈。
其它改进
- 修复 use_frameworks! 与 CocoaPods 的相关支持 在 0.60 的版本中,我们为了集成 CocoPods 进行了一些更新。根据反馈,此方案导致 use_frameworks! 与之冲突,无法正常使用。这一问题已在 0.61 版本中得以修复,现在您可以轻松地将 React Native 集成到需要使用动态框架进行构建的 iOS 项目中。
- 添加 useWindowDimensions Hook. 这个全新的 Hook 会自动发布以及订阅 Dimensions 更新,同时在大多数情况下可以代替 Dimensions API 使用。
- 已更新 React 版本至 16.9. 此版本弃用了 UNSAFE_ 生命周期方法的旧称,包含对
act
的相关改进以及众多内容。有关自动迁移脚本和更多信息,请参见React 16.9 blog post。
重大变更
- 删除 React .xcodeproj. 在 0.60 版本中,我们通过 CocoaPods 引入了 auto-linking 功能。我们还将 CocoaPods 集成到了 e2e 测试运行中。因此,从现在开始,我们就有了将 RN 集成到 iOS 应用中的标准方法。从此,我们也不再需要 React .xcodeproj,0.61版本正式移除该文件。注意:如果您已经使用了 0.60 版本中提供的 auto-linking,则不会受到任何影响。
鸣谢
感谢所有参与 React-native 0.61 版本开发的贡献者!
要详细了解 0.61 版本带来的变化,请参阅 0.61 changelog.
原文地址:https://facebook.github.io/react-native/blog/2019/09/18/version-0.61
wlfcss原创,转载请注明!