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

你说的曾经没有我的故事 提交于 2021-01-20 09:51:24

官网:

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!