React Native发布重构路线图

17611538698

webmaster@21cto.com

登录注册

React Native发布重构路线图

21CTO

资讯 0 2847 2018-11-04 12:02:52

21CTO 导读：

React Native作为时下最热门的跨平台开发方案，在这两年的移动跨平台方案中可谓一枝独秀，在很多的移动产品中都可以看到它们的影子，相比国内的Weex，RN的迭代更加频繁，性能上也无限的接近原生应用。

不过，RN从性能上来说还是有提升的可能，所以，在今年的6月份，也即是Facebook刚刚发布了 React Native 0.56后，React工程经理 Sophie Alpert 在其官方博客上宣布他们将要重构 React Native，使其更轻量，更适应 JavaScript 生态圈的发展。

React Native应用现状

Sophie Alpert 说，在 Facebook 内部，他们比以往任何时候都重视 React Native，它已经被用于 Facebook 许多重要的项目上。包括他们最受欢迎的产品之一 Marketplace，每月有 8 亿人使用。

React Native 也开始被应用在应用程序的其他地方，如果读者上个月观看了 F8 主题演讲，就会发现 Blood Donations、Crisis Response、Privacy Shortcuts 和 Wellness Checks 的所有新功能都是使用 React Native 构建的。

Facebook 主应用以外的项目也在使用 React Native。新的 Oculus Go VR 头戴式设备对应的移动应用程序就完全使用 React Native 构建。

Sophie Alpert 表示，React Native 的目标从来都不是替代其他技术，他们专注于 React Native 自身，努力使之变得更好，但他们希望看到其他团队从 React Native 中得到一些想法或灵感，例如将即时重新加载技术运用到非 JavaScript 代码中。

React Native的架构

React Native 项目的设计初衷是成为 JavaScript 和原生应用之间的桥梁。React DOM 将 React 的状态更新变成了命令式、可变的 DOM API 调用，如 document.createElement(attrs) 和.appendChild()，而 React Native 则返回一个单独的 JSON 消息，它列出了要执行的一些操作，如 [[“createView”, attrs], [“manageChildren”, …]]。

他们将整个系统设计为永不依赖获取同步响应，并确保列表中所有的内容都可以完全序列化为 JSON，并可以反序列化回来。

这样做是为了提高灵活性：在这个架构之上，可以构建像 Chrome 调试器之类的工具，这些工具可以通过 WebSocket 连接异步运行所有的 JavaScript 代码。

在过去的 5 年里，他们发现最初的设计原则加大了某些特性的开发难度。异步桥接（asynchronous bridge）意味着不能直接将 JavaScript 逻辑与很多原生 API 集成在一起，因为这些原生 API 是同步的。

批量桥接（本地调用队列）意味着 React Native 应用程序调用本地函数会更加困难。而且串行化的桥接意味着不必要的复制，因为它不是直接在两个世界之间共享内存。对于完全使用 React Native 构建的应用程序，这些限制通常是可承受的。但对于在 React Native 与现有应用程序代码之间进行复杂集成的应用程序，就很糟糕了。

因此，Facebook 正在对 React Native 进行大规模重构，让框架变得更加灵活，并更好地与 JavaScript / 原生混合应用中的原生基础设施集成。

通过这个项目，他们将应用在过去 5 年中学到的知识，逐步让架构走向现代化。他们正在重构 React Native 内部，大部分工作都是在底层进行的，现有的 React Native 应用程序几乎不需要做出更改。为了使 React Native 更轻量化并能更好地适应现有的原生应用，此次重构主要从三个方面进行。

首先，改变线程模型。UI 更新不再需要在三个不同的线程上执行，可以在任意线程上同步调用 JavaScript 进行优先更新，同时将低优先级工作推出主线程，以便保持对 UI 的响应。

其次，将异步渲染功能引入 React Native 中，允许执行多个渲染并简化异步数据处理。

最后，简化桥接，让它更快、更轻量。原生和 JavaScript 之间的直接调用效率更高，并且可以更轻松地构建调试工具，如跨语言堆栈跟踪。

完成以上工作之后，就有可能带来更紧密的集成。现在，如果不通过复杂 hack 的手段就无法让原生导航和手势处理或原生组件（如 UICollectionView 和 RecyclerView）一起工作。在对线程模型做出更改之后，就可以直接构建这样的功能。

React Native重构线路

最近，Facebook官方公布了一些RN项目重构上的细节，主要会从以下一些方面来推动项目的进行。

Facebook 对于 React Native 的愿景总体如下：
1.成为一个健康的 GitHub 仓库，及时处理 issue 和 PR
2.提高测试覆盖率
3.同步自 Facebook 代码仓库的 commits 不能违反开源测试的准则
4.增加更多有意义的社区贡献
5.cebook 使用与开源版本相同的公共 API
6.React Native 将遵循语义化版本的标准
7.打造充满活力的生态系统，社区将会提供并维护高质量的 ViewManagers, native modules 和多平台支持
8.提供优秀的文档。专注于帮助用户创建高质量的体验，以及最新的 API 参考文档

接下来看看 Facebook 将会执行的一些具体计划 ——

React Native 开发团队表示他们的目标是通过删除非核心和无用的组件来简化 React Native —— 将非核心组件交由社区维护，使其迭代发展更快，此举亦将更方便对与 React Native 相关的贡献进行管理。目前已决定将数十个组件的所有权移交给社区。

开发团队表示 WebView 正是将非核心组件交由社区维护的一个实例，他们还正在打造一个工作流 —— 即便他们从仓库删除这些组件后，内部团队开发者仍可继续使用。

为了这次的大规模重构，同时兼顾内部和外部开发体验的重要性不言而喻。须知道，React Native 开发团队使用的是内部开发工具，开发体验可能与开源维护者的完全不同，那些在开源社区备受欢迎的工具可能并没有被 React Native 开发者使用，而这种内外差异很大程度会给他们接下来的重构工作带来挑战。

为此，他们开源了一些内部使用的工具，并表示将改进对流行于开源社区的工具的支持。

1.开源 JSI 并让社区能够使用自己的 JavaScript VMs，从 RN 的初始版本中替换现有的 JavaScriptCore。有关 JSI 的信息，他们未来会在博客中公布，现在可以通过 React
2.Conf 大会上的演讲视频了解更多细节
3.支持 Android 平台上的 64 位库
4.支持在新的架构下进行调试
5.改进对 CocoaPods, Gradle, Maven 和新的 Xcode 构建系统的支持

除了打通内外部的开发体验，React Native 开发团队表示还会加强社区内部的沟通。React Native 是 GitHub 上贡献者数量最多的开源项目之一，未来他们将继续推出鼓励贡献者积极参与贡献的举措，例如提高透明度和增加公开讨论的机会。对于新手而言，文档是一个十分重要的问题，因此开发团队表示将会创建自动生成的 API 参考文档，并改进发行说明，以改善用户体验。

最后，开发团队表示这些工作将在明年完成，其中一些工作已在进行中，例如已开源的 JSI 项目。其他的一些改进如简化 React Native，还需要更多的时间去完成，开发者有任何问题可以在提案中进行讨论。