React Native作为时下最热门的跨平台开发方案,在这两年的移动跨平台方案中可谓一枝独秀,在很多的移动产品中都可以看到它们的影子,相比国内的Weex,RN的迭代更加频繁,性能上也无限的接近原生应用。不过,RN从性能上来说还是有提升的可能,所以,在今年的6月份,也即是Facebook刚刚发布了 React Native 0.56后,React工程经理 Sophie Alpert 在其官方博客上宣布他们将要重构 React Native,使其更轻量,更适应 JavaScript 生态圈的发展。

React Native宣布重构

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项目重构上的细节,主要会从以下一些方面来推动项目的进行。

  1. 让 RN 的 GitHub 存贮库更健康,issues 和 pull 请求将及时得到处理;
  • 提高测试覆盖率

  • 从 Facebook 代码存储库同步的 Commits 不能违背开源测试的准则

  • 提升社区的贡献量

  1. 稳定 API,使之更容易与开源依赖项交互;
  • Facebook 使用与开源相同的公共 API

  • React Native 将遵循语义版本标准

  1. 让生态系统更加有活力,社区将提供高质量的 ViewManagers、native modules、多平台支持;

  2. 文档优化,专注于帮助用户创建高质量的体验,以及最新的 API 参考文档。

RN 团队的目标是通过删除非核心和无用的组件来简化 RN,将非核心组件转移到社区,让开发者使用更加便捷,他们目前已经决定将这些组件的所有权为社区所拥有:github.com/react-nativ…

例如,WebView就是其中的一个实例: WebView组件剥离

同时,为了更好的服务React Native,React Native官方将从以下几个方面进行优化。

开源内部开发工具

由于 Facebook 内部开发人员用的是内部开发工具,开发体验与开源的完全不同,在开源社区受欢迎的那些工具可能并没有被 Facebook 开发人员使用,在某些情况下,Facebook 团队已经习惯使用仅限 Facebook 内部使用的工具,这种内外差异可能会很大程度影响他们接下来的重构工作。

为此,他们做了如下改进:

  • 开源 JSI,使社区能够使用自己的 JavaScript VMs,从 RN 的初始版本中替换现有的 JavaScriptCore,有关 JSI 的信息,他们未来会公布,现在你可以先通过 React Conf 大会上的演讲视频了解:www.youtube.com/watch?v=Ucq…

  • 支持 Android 上的 64 位库;

  • 新架构下支持调试;

  • 改进对 CocoaPods、Gradle、Maven 和新 Xcode 构建系统的支持。

改善测试基础设施

当 Facebook 工程师发布代码时,如果通过所有测试,则认为代码可以上线了,这些测试可以判断某些改动是否会破坏 React Native,由于 Facebook 使用 React Native 的方式与外部存在差异,他们可能在不知不觉中破坏了开源环境中的 React Native。

为此,Facebook 将支持内部测试,确保它们在尽可能接近开源的环境中运行。这将有助于防止被破坏的代码开源。同时,他们还将致力于建设测试基础设施,以便在 GitHub 上更好地测试核心存储库,使未来的 pull 请求能够包含在测试里。

公共 API

Facebook 将通过公共 API 使用 React Native,和开源一样,以减少无意间的破坏性更改,他们的目标是融合稳定的公共 API,并在 v1.0 中采用语义版本控制标准。

反馈交流

React Native 是 GitHub 上贡献者数量最多的开源项目之一(排名第二),未来,Facebook 将继续致力于贡献者相关的举措,例如提高透明度和公开讨论。对新手来说,文档将是一个大问题,为此,RN 将创建自动生成的 API 参考文档,改善用户体验。

RN 团队称,这些项目将在明年完成,其中,JSI 项目已经在进行中,其他的一些改进如简化 RN,还需要更多的时间去完成,开发者有任何问题可以在提案中讨论,以下是链接地址。

注,本文来自于《React Native官网》。如果你对RN有兴趣,或者还停留在观望和入门的边缘,可以看一些我之前的书《React Native移动开发实战》,如果有任何技术问题,也可以进群交流:515980159。

React Native发布重构路线图相关推荐

  1. React Native 宣布重构计划!

    web前端教程 用大白话,来讲编程 6月中旬 Facebook 曾宣布要对 React Native 进行大规模重构,旨在使其更轻量,更具灵活性,更适应 JavaScript 生态圈的发展. 现在 F ...

  2. React Native发布——使用AppCenter

    前言 本文基于React Native开发环境搭建,默认已搭建好XXProject的react native项目.本文appcenter cli版本为2.10.0,本文法布时,coderova已停用, ...

  3. 基于React Native的移动平台研发实践分享

    本文转自微信号EAWorld.扫描下方二维码,关注成功后,回复"普元方法+",将会获得热门课堂免费学习机会! 本文目录: 一.React Native 已经成为了移动前端技术的趋势 ...

  4. React Native布局详细指南

    本文出自<React Native学习笔记>系列文章. 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox.  在React Nati ...

  5. React Native使用指南-使用链接库

    并不是所有的APP都需要使用全部的原生功能,包含支持全部特性的代码会增大应用的体积.但我们仍然希望能让你简单地根据自己的需求添加需要的特性. 在这种思想下,我们把许多特性都发布成为互不相关的静态库. ...

  6. React Native之React速学教程

    本文出自<React Native学习笔记>系列文章. React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识.虽然官方也有相 ...

  7. React Native 学习资源精选仓库

    <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...

  8. React Native 学习资源精选仓库(汇聚知识,分享精华)

    React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...

  9. 庖丁解牛!深入剖析React Native下一代架构重构

    Facebook在2018年6月官方宣布了大规模重构React Native的计划及重构路线图.目的是为了让React Native更加轻量化.更适应混合开发,接近甚至达到原生的体验.(也有可能是Re ...

最新文章

  1. 5层模型中数据从源主机到目的主机之旅
  2. 主窗体界面设计及功能实现
  3. IDaaS企业身份管理训练营火热报名中 体验新一代企业云身份服务
  4. 延时加载refresh()方法
  5. python从2.6升到2.7后 桌面输入法图标不见
  6. markDown 语法(个人练习篇)
  7. LeetCode 558. 四叉树交集(递归)
  8. 基于JAVA+SpringMVC+MYSQL的数码商城
  9. 随想录(用好红黑树)
  10. 试图将驱动程序添加到存储区_云存储——终于等到你,还好没放弃
  11. PDE34 Transport equation: derivation general solution
  12. OpenStack_I版 5.Nova部署
  13. 【Java工具类】中文转换成汉语拼音工具-pinyin4j
  14. 码农也来关注下经济问题美元加息对我们的影响
  15. python Beautifulsoup4爬取凡人修仙传仙界篇连载中文章并生成txt
  16. Android自定义WebView实现Youtube网络视频播放控件
  17. Excel数据分析入门-数据图表
  18. 干草堆——acwing算法题第二天
  19. 基于C语言设计符号表
  20. 如果张柏芝的孩子长大

热门文章

  1. 961计算机基础综合pdf,2017-2018年北航科学与技术教育961计算机基础综合考研大纲重难点.pdf...
  2. 常熟理工学院计算机网络基础,常熟理工学院计算机网络复习题之简答题
  3. 方形物体绕中心旋转的扭力_三维旋转
  4. HH的项链 HYSBZ - 1878 (莫队/ 树状数组)
  5. 桶排序+基数排序+计数排序
  6. SPARK安装一:Windows下VirtualBox安装CentOS
  7. Keil C51的库函数
  8. 第一章 Linux系统简介
  9. 初识Python(1)__Python基础
  10. Rhythmk 一步一步学 JAVA(2) : 操作 MYSQL 数据库