阅读 331

React Native简史

诞生

React Native 诞生于 2013 年的 Facebook 内部黑客马拉松(hackathon):

In the essence of Facebook’s hacker culture, React Native started as a hackathon project in the summer of 2013.

(摘自In the beginning: React Native’s roots

从 React 说起

随着 React 的大规模应用,Facebook 越发感受到 React 以及 Web 技术的优势,希望 Native 开发也能像 Web 一样Move fast

  • 快速迭代(Rapid iteration cycle):Web 一天两版,产品迭代周期更短

  • 快速反馈(Immediate testing feedback):Web 发布立即触达用户,A/B test 等实验结果立等可取,产品演进更快

  • 快速开发(Rapid development velocity):刷新浏览器即可生效,不必等待重新编译 App

为了达成这个目的,Facebook 尝试了 3 种方案:

  • WebView:由 Native 提供 Webview 容器,业务用 Web 技术来开发。优势在于能把 Web 开发体验一锅端走,但受限于 Web 技术,体验无法与 Native 相提并论,最终因性能和扩展性没有达到预期而作罢

  • Porting React to native:把 React 移植到 Native 实现,一个疯狂的想法。在 2015 年完成了 iOS 版(ComponentKit),并在 2017 年推出了 Android 版(Litho)。以此让 Native 开发也能具备 React 的种种优势,如 UI 可预测性、Flexbox 布局等。但无法满足提升开发效率的初衷,一点变动仍要重新编译,另一方面,这一套与 Web React 并不互通,无法利用 Web 生态中建立在 React 之上的利器(如Relay

  • Scripting native:通过 JavaScript 调用 Native API。既能拥有 Web 开发的快速迭代能力,还不局限于 Web 技术,同时也没有脱离 JavaScript 生态,似乎是个完美的方案

React Native,就是第三种方案的最终成果

2015

2015 年 1 月的 React.js Conf 上,这个内部项目首次公布,并在 5 月的 F8 Conference 上正式开源

最初只支持 iOS,同年 9 月支持了 Android

2016

Microsoft UWP 和 Samsung Tizen 的支持,意味着React Native 从移动端走向了 PC(Win 10)、游戏机(Xbox One)、手环(Gear Fit 2)、智能电视机(SUHD)甚至全息眼镜(HoloLens)

此外,开发体验、性能、API 能力等都在快速迭代中不断提升

2017

建立了月度迭代计划,以及定期召开包括社区团队在内的月会。性能仍然是一个重要方向,动画、List View 等重要更新都涉及性能优化

另外,还开始了编译时的性能优化探索,如Prepack,期望大幅削减 React Native core 的初始化耗时:

We plan to bring the cost of the React Native bridge close to zero via projects like Prepack and more build time processing.

2018

为了更好地支持 Native & React Native 混合 App,核心团队启动了架构升级计划Fabric),包括重构线程模型、支持 React async rendering 能力、简化 React Native core 等大改。同时,Facebook 也计划开源包括 JSI 在内的一些基础设施,具体见Open Sourcing Internals and Updated Tooling

另一方面,开源社区的管理也走向正规化,包括版本管理、RFC、交流讨论等

2019

在开源社区的参与下,架构升级计划进展迅速,部分非核心模块从 React Native Core 拆出去独立维护,并且效果不错:

These modules are getting more support than they ever did within React Native, showing that this is a great step for the community.

同时,性能优化从未停歇,甚至换用Hermes作为 Android 平台的 JS 引擎(之前 Android 也用 JavaScriptCore),以求进一步的性能提升:

Hermes is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size.

参考资料

有所得、有所惑,真好

关注「前端向后」微信公众号,你将收获一系列「用原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术

本文首发于 ayqy.net,原文链接 www.ayqy.net/blog/the-hi…

文章分类
前端
文章标签