开发跨平台 App 推荐 React Native 还是 Flutter？

官网：

RN:https://reactnative.cn/

Fluter:https://flutterchina.club/

 

React Native 能够跨平台是因为它允许你使用 React/JavaScript/JSX 的写法写原生应用，而在底层他会替你调用相应的 iOS 原生组件或者 Android 原生组件，又或者直接生成适用于 Web 的 DOM 树。所以他做的事情是，用 JavaScript 调用对应系统渲染器进行渲染展示。

Flutter 又是怎么跨平台的呢——Skia。当你使用 Flutter 框架（Dart）开发应用时，其底层渲染由 Skia 接管，没有什么 Android runtime、Chromium 或者其他中间层了，是的，Skia 的下层便是 CPU/GPU 了，一个受控的画布，基本上意味着你想画什么就画什么了，不再需要调用原生 Widgets，而这便是 Flutter 能够跨平台的原因。

谁更快？

flutter

React Native 这种从使用 JavaScript 到解析调用 Native 的过程中间显然要经过多个环节，而 Flutter 里将 Dart 代码 AOT 编译为本地代码，所以 Flutter 应用是直接使用本机指令集运行，这就不涉及解释器这一层。关于 Flutter 为什么这么快 Google 的工程师在 Google I/O、GDD 以及刚结束的 D2 上都有介绍，

支持平台

React Native 支持 iOS/Android/Web 是毋庸置疑的，但 Flutter 现在还只能「成熟」的支撑 iOS/Android，即便上个月 Flutter Live 1.0 说到 Flutter for Desktop 以及 HummingBird，但这些都还处于初期，至少在明年 Google I/O 前还不能报有希望。

成熟/生态

art 生态相比移动端/前端生态远小的多，看看 Flutter Live 上那些截图就知道 Flutter (+Dart) 的开发人员也远不及 Android / iOS / Chromium 等平台的开发人员，是的，是远远不及，即便加上 Dart 相关开发人员。往外扩再想想社区，React Native 经过多年发展，其现在的社区规模或者是生态完善性都是 Flutter 近期根本无法追赶上的，虽然 React Native 依旧有不少「坑」。

未来发展

Flutter 风光很足，且官方回应非常迅速（GitHub Issues），但生态远远没到成熟的地步，这对于资源有限的应用开发团队来说是很致命的，且现在在开发调试上还是有些痛苦的，比如无法准确定位错误堆栈等；

但 React Native 为了达到跨平台而对 UI 上的一妥协与牺牲也是被人们所熟知的。

但如果说两边现在最让人期待的事情，Flutter 无疑是 Flutter for desktop 与 HummingBird，而 React Native 则无疑是 Facebook 正在进行的重构工作。现在说谁将最终获胜还为时尚早。

Flutter与RN异同

简单总结一下Flutter与RN的异同。

• 都实现了移动开发跨平台
• 界面的编写都很类型，采用响应式视图，维护了一个状态机，只更新改变的最小区域界面
• 都支持热重载hot reload，开发调试非常方便
• 调用系统的service仍然需要封装接口，仍然还是需要懂得native开发
• RN采用JS语言开发，基于React，受众更多。Dart语言受众小
• Flutter的UI框架性能貌似更高一些，但是直接丢弃了原生UI框架。而RN还是可以自己利用原生框架，两个各有好处。Flutter的兼容性高，RN可以利用原生已有的优秀UI
• Flutter的第三方库还很少，RN发展的早，虽然也还不完善，但是比Flutter好
• RN的界面布局更像网页布局，而Flutter的布局更像native布局
• Flutter在跨平台这方面做得更彻底一些

Flutter、RN、原生对比

认知：

比较内容	Flutter	RN
平台实现	通过Dart虚拟机编译成机器码	Virtual Dom映射到原生View，通过ART虚拟机编译成机器码
绘制引擎	Skia	JS V8+Skia/OpenGL ES
使用语言	Dart	React
上手难度	一般	难
框架程度	重	较重
社区	丰富，谷歌力捧	活跃，FaceBook支持
软件发布	支持热更新（暂未开放）	支持热更新

 

1、包体积原生比较小，Flutter和RN不相上下（Ios系统需要引入Skia库，最终包体积Flutter会明显大于RN），由于Flutter和RN框架中需要一些C++依赖库，导致包体积比原生大了很多。
2、启动时间，Flutter（冷热启动时间）>RN=原生
3、内存占用，在高端手机上，flutter占用内存是大于RN的，但是低端手机Flutter的内存占用会低于RN，RN内存占用不稳定，页面刚生成的时候内存占用会高一点, 之后缓慢回落。
4、CPU占用，RN明显高于Flutter和原生，这会导致手机性能降低、耗电量增加、发热更厉害
5、主观感受，Flutter要比RN更加流畅，体验感更好，但是和原生仍有不小差距，不过Flutter还很年轻，官方宣称其性能会接近原生，甚至超过原生体验，随着Google不断的改进相信在不远的将来会实现这个可能。

总结

1.性能方面： Flutter是基于Dart语言，所有避免了RN的那种通过桥接器与js通讯导致效率低下的问题，所有在性能方面，Flutter要比RN更 高一些，会更接近原生体验

2.学习方面： Flutter是基于Dart开发，需要学习这个新的语言，成本高，RN是基于React，对前端工程师更加友好。

3.布局方面： Flutter的界面更像原生Native布局方式，而RN的布局更像网页布局。

4.成熟方面： RN是15年发布的，经历4年的历程，现在应该比较成熟，虽然内部还不是非常完善，Flutter更年轻一些

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

参考链接

https://www.cnblogs.com/GJ-ios/p/14260758.html

https://www.zhihu.com/question/307298908/answer/563152482

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------