开启探索之旅：解析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

源码：

• Flutter: github.com/CarGuo/GSYG...
• React Native:github.com/CarGuo/GSYG...

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 <<<, 备注我的花名成功率更高哦~ 😘