React Native 的定位是通过 React 构建原生 App:
A framework for building native apps with React.
具有 5 大特性:
那么,有 2 个问题:
之所以用 React 写 Native 应用,有 2 方面原因:
Native 用上 React 的话,也能获得 React 的种种好处。当然,这只是一方面,背后的真正源动力是希望 Native 开发能像 Web 一样 move fast
而对于第二个问题,要从 React Native 的由来说起
实际上,Facebook 尝试过 3 种思路:
不利用低成本的 WebView 方案跨平台,是因为受限于 Web 技术,体验无法与 Native 相提并论,最终因性能和扩展性没有达到预期而作罢
把 React 移植到 Native 是个不错的思路,但只能获得 React 自身的一些好处(不包括 JavaScript 世界的 React 繁荣生态),并且无助于 Native 的 move fast,因为 Native 还是纯 Native
相比之下,React Native 通过 JavaScript 调用 Native API 是一个两全其美的方案,既能让 Native 用上 React(及 JavaScript 的繁荣生态),也能拥有 Web 的开发速度,因为写的和实际执行的都是 JavaScript,Native 仅提供视图渲染能力及平台特定能力
React Native 诞生于 2013 年的 Facebook 内部黑客马拉松(hackathon)
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)
2018 年 6 月启动了架构升级计划 Fabric,重构线程模型并简化 React Native Core,以更好地支持 Native & React Native 混合 App
2019 年 7 月迎来 JavaScript 引擎级性能提升,将 Android 平台之前使用的 JavaScriptCore 替换成 Hermes
P.S.关于 React Native 发展史的更多信息,见React Native 简史
写的是 JavaScript,实际渲染的是 Native 界面
因此,从非常高的视角来看,可以这样理解 React Native 技术(或者说 Scripting Native 方案):
JavaScript层
---------------------------------
???
---------------------------------
Native层
关键点在于:中间是什么?上下两个世界是怎样联系起来的?
在 React Native 里,中间是 Bridge 层,通过消息通信将 JavaScript 世界与 Native 世界联系起来
具体的,Shadow Tree 用来定义 UI 效果及交互功能,Native Modules 提供 Native 功能(比如蓝牙),二者之间通过 JSON 消息相互通信:
Bridge 层是 React Native 技术的关键,设计上具有 3 个特点:
P.S.关于 React Native 架构的更多信息,见React Native 架构一览
React Native 中主要有 3 个线程,分别是:
此外,还有一类 Native Modules 线程,不同的 Native Module 可以运行在不同的线程中(具体见Threading)
整体上,启动过程分为初始化 Bridge 与执行业务代码两部分,对应图中上下两部分:
首次渲染时(图中自右向左的流程),JS 线程将视图信息(结构、样式、属性等)传递给 Shadow 线程,创建出用于布局计算的 Shadow Tree,Shadow 线程计算好布局之后,再将完整的视图信息(包括宽高、位置等)传递给主线程,主线程据此创建 Native View
用户交互时(图中自左向右的流程),则先由主线程将相关信息打包成事件消息传递到 Shadow 线程,再根据 Shadow Tree 建立的映射关系生成相应元素的指定事件,最后将事件传递到 JS 线程,执行对应的 JS 回调函数
最初的设计也带来了一些限制:
这些问题在 Native + React Native 的混合应用中尤其突出,因此,2018 年 6 月提出了大规模的架构升级计划:
具体包含 3 点重大改动:
Fabric 期望简化渲染流程中复杂的跨线程交互,允许 JavaScript 直接控制高优先级的 UI 操作,甚至允许同步调用(应对列表快速滚动、页面切换、手势处理等场景)
TurboModules 允许按需加载 Native 模块,并在模块初始化之后直接持有其引用,不再依靠消息通信来调用模块功能
P.S.关于 React Native 架构升级的更多信息,见React Native 架构演进
React Native 最初的愿景是learn once, write anywhere:
It’s worth noting that we’re not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”
(摘自React Native: Bringing modern web techniques to mobile)
平台支持上,目前(2019/9/21),除官方提供的 Android、iOS 支持外,社区还提供了UWP、Tizen、Web、Mac、Apple TV,甚至微信小程序等支持
P.S.更多支持平台,见Out-of-Tree Platforms
企业应用方面,除 Facebook 外,React Native 在腾讯、百度、京东等大规模企业中都有所应用:
React Native 发展至今的 4 年里,工具生态也有了一定程度的发展:
P.S.关于 React Native 生态的更多信息,见Exploring React Native Ecosystem – Tools, backend, database and best libraries
比起积淀深厚的 Android、iOS 技术生态,React Native 生态尚处于较低成熟度的阶段,因而面临与 Native 基础设施集成、跨语言栈调试等难题。但无论怎样,Learn once, write anywhere 的愿景在路上,正向我们赶来