开启探索之旅:解析Flutter与React Native跨平台框架的奥秘

众所周知,Flutter 和 React Native 都是跨平台应用程序开发的两个领先工具,很多小伙伴在入坑前总是会纠结这两个平台的差异,今天我们就来根据不同维度的比较,了解它们的差异以及各自的最佳适用场景。

一、什么是Flutter?

1.1 一句话概述

Flutter是一款移动应用程序SDK,可以用一套代码同时构建高性能、美观的多平台应用程序。

1.2 开发背景

Flutter最初由Google在2017年推出,它的诞生源于Google对Android和iOS应用程序开发的重视和发展需求。所以Flutter的工具和平台依赖于Google的技术基础设施,如Dart语言、Skia图形库(2D渲染引擎)、Fuchsia操作系统等。

1.3 发展简史

  • 2014.10 - Flutter的前身Sky在GitHub上开源
  • 2015.10 - 经过一年的开源,Sky正式改名为Flutter
  • 2017.5 - Google I/O大会上,谷歌正式宣布推出Flutter
  • 2017.11 - Flutter发布了第一个稳定版本,标志着Flutter正式面向开发者发布
  • 2018.12 - Flutter 1.0发布,宣布Flutter已经准备好用于生产环境
  • 2021.5 - Flutter 2.0发布,推出了许多重要功能和创新,例如支持桌面平台、全新的Web支持新的UI库和更多的开发工具
  • 2022.5 - Flutter 3.0发布,提供了对 macOS 和 Linux 桌面端的稳定版支持,同时包括 Firebase 集成的改进,增加了与生产力和性能相关的新特性,并对 Apple 芯片提供了支持
  • 2023 - Flutter 3.7发布,创建自定义菜单栏和层叠式菜单、更好的国际化工具支持、新的调试工具以及其他功能和特性等

由此可见:Flutter在逐渐的走向成熟和壮大,近几年的迭代更新越来越快,它的生态圈也在不断的发展。

二、什么是 React Native?

2.1 一句话概述

React Native是一种跨平台的移动应用开发框架,可以使用JavaScript和React构建移动应用程序。

2.2 开发背景

React Native的主要开发背景是Facebook的内部需求。由于原生移动应用的开发周期和成本较高,Facebook开始研究可用于移动应用开发的替代方式,于是Facebook的团队在ReactJS(Web应用程序开发框架)的基础上开发出来一种移动应用开发框架。

2.3 发展简史

  • 2013 - Facebook开始研究可用于移动应用程序开发的替代方式
  • 2015.1 - Facebook正式公开宣布React Native的开发工作,为iOS平台发布了第一个版本
  • 2015.3 - Facebook在React Conf 2015上宣布,React Native正式面向公众发布,并发布了第一个可用于Android平台的版本
  • 2015.7 - Facebook将React Native开源,放置在GitHub上
  • 2016 - Facebook发布React Native的0.30版本,增加了许多重要功能,包括与混合应用程序的更好集成和改进的性能
  • 2017 - Facebook发布React Native的0.47版本,包括了许多重要的改进和新功能,如增强的动画、快速开发的命令行界面等
  • 2018 - Facebook发布React Native的0.56版本,包括了更多的改进和增强功能,如支持布局动画、更快的启动时间等。同时,社区开始涌现各种应用案例和优秀的第三方库
  • 2022.9 - 更换默认引擎为Hermes,针对 React Native 应用而优化的全新开源 JavaScript 引擎,优化了启动时间,减少内存占用以及空间占用
  • 2023.6 - Metro(React Native 默认的 JavaScript打包模块)重要的功能更新、性能优化

React Native作为历史上第一个没到正式版本,github却有6w+星星的项目,近年来更新迭代快,且社区内容丰富,在大前端中的人气也是相当高。

三、Flutter与React Native的核心差异

Flutter使用自渲染引擎,在自己的画布上渲染所有组件。

React Native使用原生渲染,借助原生的能力来进行渲染,将JavaScript 组件转换为原生组件。

四、功能和特性对比

4.1 语言差异

【安全性差异分析】

将报错提前到编译的好处是以免...

【功能实现差异】

实现同样的UI效果,让我们看看Flutter和React Native在具体代码上会有什么差异

可以看到,Flutter的嵌套代码比RN更复杂且更难以阅读和理解。这说明Flutter在嵌套层次较深的情况下可能会出现嵌套地狱,使代码变得冗长和难以维护,而RN则更注重使用简单的布局和样式来避免嵌套层次过多,使代码更易读和管理。

4.2 跨平台能力

4.3 动态化能力

相比跨平台能力,国内各大厂商更偏向于能够支持动态化的技术。这是为什么呢?移动互联网已经发展十年了,随着业务成熟和功能的相对稳定,整体重心开始偏向运营,强烈的运营需求对客户端架构和发布模式都提出了更高的要求。如果每个修改都需要经历开发、上线、版本覆盖等漫长的过程,根本无法达到快速响应的要求。

4.4 性能比较

【小型项目实例分析】

用Flutter和RN分别实现的一个实际可用的App

场景:

1、默认登录成功

2、"动态"页,点击搜索按钮,搜索关键字"Java",正常速度浏览3页,等第4页加载完成后回退

3、点击"趋势"页Tab,浏览Feeds到页面底部,点击最底部的Item,进入Item后,浏览详情+浏览3页的动态后回退,到"我的"Tab页

4、查看"我的"Feeds到底部,点击右上角搜索按钮,搜索关键字"C",浏览3页后,等第4页加载完成后场景结束

演示示例:

测试工具:

  • iOS

  • 掌中测(iOS端):CPU,内存

  • Instruments:FPS

  • Android

  • 基于Adb的Shell脚本:CPU,内存,FPS

测试机型:

  • iOS:iPhone 5c 9.0.1 / iPhone 6s 10.3.2

  • Android:Xiaomi 2s 5.0.2 / Sumsung S8 7.0

源码:

iOS

iPhone 5c 9.0.1

iPhone 6s 10.3.2

Android

Xiaomi 2s 5.0.2

Sumsung S8 7.0

  • 注: MFS - Max Frame Space: 指的是去掉buffer之后的两帧的时间差

测试结论:

  • Flutter在低端和中端的iOS机型上,FPS的表现都优于RN
  • iOS的CPU的使用上Flutter在低端机上表现略差于RN,中端机型略优于RN
  • Flutter在Android端高低端机的CPU上的表现都优于RN,尤其在低端的小米2s上有着更优的表现
  • Android端FPS和流畅度的表现Flutter优于RN

可以看出,Flutter团队在针对不同机型上处理更加的细腻,目的就是为了带来稳定流畅的体验。

【大型项目实战】

在进行我司较大的项目实战时,相较于RN,Flutter更容易暴露出一些性能相关的短板:

  • Flutter在实现有复杂布局的长列表界面时,性能压力较大,如果编码时稍不注意,就容易引起卡顿等问题

  • 图片渲染和性能管理有些粗放,当不能轻易释放Flutter引擎时,性能压力就会比较大,尤其表现在iOS平台,成为了一个阻碍性问题。

4.5 开发文档和社区资源

React Native的社区成立时间比Flutter早,社区规模和生态完整性是Flutter暂时无法追赶上的

4.6 是否支持鸿蒙系统

Q:如今华为都已经"遥遥领先"了,那么鸿蒙系统 Harmony OS,是否支持主流的跨端框架呢?

在最初的 HDC 大会上,华为就表示将支持 React Native、Flutter、Taro、Weex、uni-app、Electron、Qt 和 CEF 等第三方框平台框架

跨平台框架的鸿蒙化也主要是由开源社区共建的形式来完成

  • React Native :software mansion
  • Weex:航旅纵横
  • Flutter:开鸿智谷
  • Taro:京东 Taro
  • uni-app:DCloud

4.7 迁移成本

对于较早开发的项目,原生页面可能占多数,在从原生向跨端框架迁移的过程中也需要考虑迁移的成本,那么将一个原生项目迁移到Flutter和React Native上,我们所需要考虑的问题有哪些呢?

将原生应用迁移到Flutter或React Native可能都需要一些大幅重写和重新设计,包括UI元素和应用逻辑,并且需要进行多端测试和调试。

4.8 未来发展

五、综合评价

六、适用场景

Q:有了这些维度的比较,那么我们在开发的过程中应该如何选择呢?

  • 技术背景
    • 对于有过iOS和Android开发经验的同学,就可以稳准狠地从Flutter切入啦,因为 Flutter 提供的 API 更接近 iOS 和 Android 中的 原生API ,开发起来会有"似曾相识"的感觉。
    • 对于没有编程经验的小白同学,建议从RN开始入手,因为RN自带一套预定义的组件,意味着不需要学习用于视图渲染的所有API,一次学习全都搞定,且RN的社区生态完善度高,遇到问题可以根据前辈踩过的坑快速解决。
  • 交付效率
    • 对于希望拥有像素级还原UI稿的交互及视觉效果的多端开发项目,因为Flutter选择了自绘UI的方向,不依赖任何的原生控件,如此一来,布局、动画、手势、绘制等尽在掌握,要想和设计同学的友谊更上一层楼,选Flutter准没错~
    • 对于产品迭代快的企业级项目,就一定要选择RN了,借助JavaScript动态化的特性,可以实现热更新、动态加载、动态升级等功能,让应用程序在不重启应用程序的情况下更新内容,以解决一些紧急问题或更新新功能。并且RN拥有丰富的第三方组件库和社区资源,能够满足大部分企业级应用的开发需求。
  • 性能要求
    • 对于涉及复杂的图形和动画操作的小型项目,由于使用自己的Skia渲染引擎,直接操作底层图形库,且有丰富的动画库和内置的动画函数,Flutter可能是更合适的选择。
    • 对于拥有较多复杂UI和交互不太复杂的大型项目,建议使用RN。

hi, 我是快手社交的Olivia

快手社交技术团队 正在招贤纳士🎉🎉🎉! 我们是公司的核心业务线, 这里云集了各路高手, 也充满了机会与挑战. 伴随着业务的高速发展, 团队也在快速扩张. 欢迎各位高手加入我们, 一起创造世界级的产品~

热招岗位: Android/iOS 高级开发, Android/iOS 专家, Java 架构师, 产品经理, 测试开发... 大量 HC 等你来呦~ 内部推荐请发简历至 >>>我们的邮箱: social-tech-team@kuaishou.com <<<, 备注我的花名成功率更高哦~ 😘

相关推荐
火柴就是我20 小时前
flutter 之真手势冲突处理
android·flutter
Speed12320 小时前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间20 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭20 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone21 小时前
从flutter源码看其渲染机制
android·flutter
ALLIN2 天前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei2 天前
Flutter 国际化
flutter
Dabei2 天前
Flutter MQTT 通信文档
flutter
诚实可靠王大锤2 天前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Dabei2 天前
Flutter 中实现 TCP 通信
flutter