Flutter VS ReactNative

最新推荐文章于 2024-03-24 18:22:11 发布
最新推荐文章于 2024-03-24 18:22:11 发布
阅读量1.9w 收藏 8
点赞数 2
文章标签： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianggaocheng_nupt/article/details/81202441
版权

Flutter 简介

目前 Hybrid App 主要分为两类: (1) 通过 WebView 加载本地网页，App 相当于本地网站。如 PhoneGap、Cordova、IOnic。 (2) 原生控件的跨平台抽象，如 ReactNative、Weex。

Flutter 走了不一样的路：自己开发了一套原生控件，每个平台实现一遍，然后把渲染引擎（这套控件）打包在每个应用里面，因此性能没有问题，平台差异也很小。

之所以不适用原生控件，是因为 Flutter 希望最终结果是更高质量的，如果 Flutter 使用原生系统 widget，Flutter 应用的质量和性能将受到这些 widget 本身质量的限制。

Flutter 和 ReactNative 底层架构的比较

image

image

React-Native、Weex 核心是通过 Javascript 开发，执行时需要 Javascript 解释器，UI 是通过原生控件渲染。Flutter 与用于构建移动应用程序的其它大多数框架不同，因为 Flutter 既不使用 WebView，也不使用操作系统的原生控件。 相反，Flutter 使用自己的高性能渲染引擎来绘 制 widget。Flutter 使用 C、C ++、Dart 和 Skia（2D渲染引擎）构建。

Skia 是一个 2D的绘图引擎库，其前身是一个向量绘图软件，Chrome 和 Android 均采用 Skia 作为绘图引擎。Android 自带了 Skia，所以 Flutter Android SDK要比 iOS SDK小很多。

image

在 ReactNative 中，引入了虚拟 DOM 来减少DOM的回流和重绘，系统将虚拟 DOM 与真正的 DOM 进行比较，生成一组最小的更改，然后执行这些更改，以更新真正的 DOM。最后，平台重新绘制真实的 DOM 到画布中。

image

React Native 是移动开发的一大进步，并且是 Flutter 的灵感来源，但 Flutter 更进一步。 在 Flutter 中，UI 组件和渲染器已经从平台中集成到用户的应用程序中。没有系统 UI 组件可以操作，所以原来虚拟控件树的地方现在是真实的控件树。Flutter 渲染 UI 控件树并将其绘制到平台画布上。

UI 一致性

Flutter 因为是自己做的渲染，因此在iOS和Android的效果基本完全一致。
ReactNative存在将RN控件转换为对应平台原生控件的过程，存在一定的差异（如之前在调研里提到过的Button在iOS和Android下面显示效果不一样）。

动态化技术

Flutter使用的Dart语言，支持AOT和JIT两种模式，在Dev时候，通过JIT可以实现热重载，开发者可以即时的看到代码修改的效果。而在Release Build的时候，通过AOT事先编译，来最大化的优化性能。因此目前Flutter不支持代码的热更新。

ReactNative 的代码通过加载 JSBundle.js执行，JSBundle.js可以保存在本地，也可以通过远程加载。目前有很多RN的热更新方案供选择。

App体积

Flutter iOS空项目 30M左右，Android空项目 7M左右。 （iOS需要额外集成Skia）
ReactNative iOS空项目 3M左右，Android20M左右。（Android会加入OKHttp导致体积增大）

Flutter 部分的底层功能在 Android 系统上已经有实现，因此 Android 上适配要好（RN在 Android 上有可能遇到兼容性问题）。ReactNative 在 iOS上面兼容性更优，facebook 官方很多 iOS only 的控件直接移植自 Native。并且目前 Flutter 还处于 beta阶段，issue比较多，在 demo上遇到键盘遮挡的问题，官方也需要等下一个版本解决。

使用案例

Google 的 AdWords 已经使用了Flutter进行开发。
国内阿里巴巴的闲鱼 Team 已经在部分页面使用了Flutter并输出了很多相关的技术文章。 https://juejin.im/user/5ac2db47f265da2393774122
https://flutter.io/showcase/

国外Facebook、Skype、Walmart、Uber、Instagrams
国内京东、QQ、手机百度等App使用ReactNative构建。
http://facebook.github.io/react-native/showcase.html

第三方Library数量

Flutter 目前有1000+ library。
ReactNatve 专用library有11000+ （以react-native名称开头的包），与web开发可以共用的包700000+。

Flutter的优势

  • 运行效率上，Flutter和ReactNative都可以达到理论上的60帧的刷新率，来实现「Native般的流畅体验」，Flutter是全Native在执行，基于底层代码(Android 上为 C++ with NDK,iOS 上为 C++ with LLVM)，而ReactNative是Native控件 + JavaScript代码，实际性能上，Flutter应该优于ReactNative，据官方文档，Flutter可以在支持的设备上达到120FPS，而ReactNative的文档上，只提到了可以达到60FPS（RN是否支持120FPS未深入调研，文档上 RN 可以通过优化 diff 的方法提升渲染效率）。

[Flutter Performance Profiling]
https://flutter.io/ui-performance/
Flutter aims to provide 60 frames per second (fps) performance, or 120 fps performance on devices capable of 120Hz updates.

[ReactNative Performance]
https://facebook.github.io/react-native/docs/performance

  • 兼容性上，Flutter 提供的 widget 都是基于 skia来实现和精心定制的，与具体平台没关，所以能保持很高的跨 os 跨 os version 的兼容性。
    Flutter 从更基础的层去抹平平台差异，站在了更宽广、更可控的一个基础平台上去演变和发展。
  • Flutter 官方提供了大部分 Material Design 控件的实现（甚至比 Android Design Support 实现的更多）。

Flutter目前的不足

  • Flutter官方没有对平板下的运行情况进行测试，有可能一些组件存在issue，目前所有widget都没有对平板进行特殊适配。

https://flutter.io/faq
We do not test on tablets, so there may be issues with some widgets on tablets. We have not implemented tablet-specific adaptations in our widgets.

  • 不支持3D

https://flutter.io/faq
Today we don’t support for 3D via OpenGL ES or similar. We have long-term plans to expose an optimized 3D API, but right now we’re focused on 2D.

  • 不支持windows app，ReactNative 可通过微软的https://github.com/Microsoft/react-native-windows 开发 windows UWP 和 WPF 程序。

  • 版本尚不成熟，目前 Flutter 官方建议的稳定版本还是 beta 版本。目前存在很多 issue，在目前调研中遇到的有「flutter doctor」环境检查误报错误、text input 会被软键盘遮挡、在设备上hot reload经常掉线等，很多问题官方的回应都是「will be fixed in next release」。

  • 官方提供的组件大部分都以 Material Design 为主，iOS风格的组件比较少，对于需要用到 iOS 风格组件的情况，都需要自己手动绘制组件。

  • 社区尚不成熟，开发中遇到问题，在官方文档、StackOverFlow 上都没有相关资料，最后在Github 的issue里找到了。

参考资料

[为什么说Flutter是革命性的？] https://www.sohu.com/a/192998605_635110

[闲鱼技术 ReleaseFlutter的最后一公里] https://juejin.im/post/5b456ebee51d4519277b7761

[React Native VS Flutter评测] https://juejin.im/post/5b1e8b826fb9a01e3962618d

[深入理解 Flutter 的编译原理与优化] http://www.sohu.com/a/239579799_629652

[slant上关于ReactNative和Flutter的讨论]
https://www.slant.co/versus/4650/17635/~react-native_vs_flutter

 

本文转自我的技术博客 https://www.cc-lab.cn/flutter-vs-reactnative/

jianggaocheng_NUPT
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jpush-flutter-plugin：JPush的官方支持的Flutter插件（Android和iOS）。极光推官方支持的Flutter插件（Android和iOS）
02-02
JPush Flutter插件 安装 在工程pubspec.yaml中加入依赖项 //github 集成 dependencies: jpush_flutter: git: url: git://github.com/jpush/jpush-flutter-plugin.git ref: master // pub 集成 dependencies: jpush_flutter: 0.6.3 配置 Android： 在/android/app/build.gradle中添加以下代码： android : { .... defaultConfig { applicationId "替换成自己应用 ID " .. . ndk { //选择要添加的对应 cpu 类型的 .so 库。 abiFilters ' armeabi ' , ' armeabi-v7a ' , ' x86 ' , ' x86_64 ' , ' mips ' , ' mips64 ' , ' arm64-v8a ' ,
Web前端热门框架大全
程序员搬运工
11-15 4584
********前端热门JavaScript框架的分析**** 一、 vue介绍 1.官网：https://cn.vuejs.org/ 2.什么是vue.js Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库...
2024年，Flutter-和-React-Native-谁主沉浮-，三年老Android经验面经
m0_61549674的博客
03-24 1148
找到一套好的视频资料，紧跟大牛梳理好的知识框架进行学习。多练。（视频优势是互动感强，容易集中注意力）你不需要是天才，也不需要具备强悍的天赋，只要做到这两点，短期内成功的概率是非常高的。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。以上就是总结的关于在面试的一些总结，希望对大家能有些帮助，除了这些面试中需要注意的问题，当然最重要的就是刷题了，这里放上我之前整理的一份超全的面试专题PDF，大家有兴趣的可以自行领取或者私信我：还有。
.1 标准课程第六章 Flutter VS ReactNative
10-27
.1 标准课程第六章 Flutter VS ReactNativeFlatList与ListView
hasFlutterPassedReactNativeYet：一个Dart Web应用程序，用于比较Flutter和React Native的GitHub明星
02-06
hasFlutterPassedReactNativeYet：一个Dart Web应用程序，用于比较Flutter和React Native的GitHub明星
buildapp:一个支持Flutter，ReactNative，原生Android，iOS的打包工具
03-09
说明 一个支持Flutter，ReactNative，原生Android，iOS的打包工具 iOS / Android上传到蒲公英 Android上传阿里云 iOS上传到TestFlight 发送消息到钉钉 自动读取版本号来重命名上传包的文件名 安装 使用Python3编写，所以得自行安装相关环境目前项目只在Mac上面跑过安装依赖pip3 install requests pip3 install oss2或者通过pipenv shell我不是Python大神，如果有安装问题大家自行根据错误来解决吧。 配置* ：src / config / config.py进行配置最低配置是把蒲公英配置上，其他不配置的也行。 * Android需要配置keystore * iOS需要配置导出plist文件（放到项目中即可，然后在config.py中配置下文件名即可） *以上至少为必须配置，网上都相关教程
Flutter VS React Native，跨端方案大 PK
weixin_44764152的博客
01-06 2384
2021 年 12 月 30 日，融云主办的业内首个程序员综艺“猿桌派”第二期开播。节目聚焦经久不衰的技术选型问题，是跨端还是原生？是 Flutter 还是 React Native？ 以下为精彩回顾： 从成本和市场覆盖的角度来看，跨端方案的优势是巨大的，写一次即可全平台运行。 那么，跨端方案如何选？Flutter 还是 React Native？ Flutter VS React Native：生态对比 通过 Flutter 和 React Native 在 GitHub 上的基础数据对比双方生态。 Fl
React Native 和 Flutter对比，包含代码实例
Web3 & Basketball
07-31 1013
React Native 是由 Facebook 开发的一个开源框架，它允许开发者使用 JavaScript 和 React 来创建原生移动应用。React Native 可以用于开发 iOS、Android 和 Web 应用。它使用 JavaScript 的生态系统和工具，如 Babel、ESLint 和 React 工具链，使得开发者可以更轻松地将他们的现有技能应用于移动应用开发。Flutter 是由 Google 开发的一个开源框架，它允许开发者使用 Dart 语言创建高性能、美观的移动应用。
全网最全 Flutter 与 React Native 深入对比分析
weixin_34217711的博客
06-20 1537
作为 GSY 开源系列的作者，在去年也整理过 《移动端跨平台开发的深度解析》 的对比文章，时隔一年之后，本篇将重新由 环境搭建、实现原理、编程开发、插件开发、编译运行、性能稳定、发展未来 等七个方面，对当前的 React Native 和 Flutter 进行全面的分析对比，希望能给你更有价值的参考。 是的，这次没有了 Weex，超长内容预警，建议收藏后阅。 前言 临冬之际，移动端跨平台在经历...
Flutter与React Native对比
BTTBHT的博客
06-05 1238
Flutter和ReactNative是目前最流行的跨平台移动应用开发框架。它们分别由谷歌和Facebook开发，拥有庞大的用户和开发者群体。那么，Flutter和ReactNative有什么区别和优劣呢？本文将从性能、代码书写、学习、运行速度以及代码量等方面对它们进行详细的对比，帮助你选择适合你的框架。
观点 | Flutter vs React Native，两个开源框架如何选？
测试萌萌
02-09 1844
例子包括 "Fluttergram"，一个使用Flutter构建的Instagram克隆样本，以及 "Friendlychat"，一个使用Firebase和Flutter构建的开源聊天应用。React Native是一个使用React构建移动应用程序的框架，React是一个用于构建用户界面的流行JavaScript库。由于其快速的开发速度和更好的性能，你可以期待Flutter被用于更复杂和高要求的项目，如游戏应用，具有复杂动画的应用，以及具有独特UI要求的应用。它是一棵描述用户界面的小部件的分层树。
移动开发之跨平台技术Flutter和React Native技术选编
01-18
汇集了多篇Flutter和RN的实战案例，从界面到网络到数据存储，移动开发进阶必读
用Flutter克隆ReactNative开发的appTing
08-10
用Flutter克隆React Native开发的app (Ting)
Flutter 和 React Native 平台的比较.pdf
最新发布
03-27
Flutter 和 React Native 平台的比较.pdf
React Native与Flutter终极比较 - linkupst
cfy_banq的博客
06-10 2592
如果希望有一种能够在多个移动平台上运行的应用程序的工具，那么就是Flutter和React Native等跨平台解决方案发挥作用的时候。但这里有一个具有挑战性的问题：他们中的哪一个最终会赢得比赛？让我们试着找出答案。FlutterFlutter是Google创建的开源跨平台 SDK（软件开发工具包）。尽管它是一个相当新的框架（它于 2017 年发布），但Flutter很快就在开发人员中流行起来。从Flutter第一次来到这个世界的那一刻起，它就一直在成长和进步，现...
[译]哪个跨平台框架才是最好的选择？React Native、Flutter 还是 Ionic
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-14 4416
关注前端瓶子君，回复“交流”加入我们一起学习，天天进步原文地址：React Native vs. Flutter vs. Ionic原文作者：Sophia Martin译文出自：掘金翻...
【React Native】VS【Flutter】
Crazy程序猿
04-10 803
技术框架【React Native】和【Flutter】进行分析和比较
Flutter 120hz 高刷新率在 Android 和 iOS 上的调研总结
恋猫de小郭的博客
03-31 5872
Flutter 120hz 高刷新率在 Android 和 iOS 上的调研总结 一、无用的知识 首先科普无用的知识，说起高刷新率，就不得不提两个词汇 ProMotion 和 LTPO 。 ProMotion 是 iOS 在支持 120hz 之后出现的动态刷新率支持，也就是不同场景使用不同的屏幕刷新率，从而实现体验上提升的同时降低了电池的消耗。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o7OCSS9v-1648737913062)(http://img.cdn.gu
开发跨平台 App 推荐 React Native 还是 Flutter？
Manghekaifa的博客
06-09 314
另一方面，Flutter使用Dart语言，尽管它不如JavaScript流行，但被认为是易学习且功能强大的语言，对于新手来说，学习Dart语言的曲线相对较平。而Flutter具有自己的渲染引擎和一套丰富的预设组件，使得在各个平台上保持一致的UI成为可能，对于追求高度一致体验的应用，Flutter是一个更好的选择。对于已经熟悉JavaScript的开发者来说，React Native的学习曲线较平，而对于不熟悉Dart语言的开发者来说，Flutter可能需要更多的学习投入。
flutter与react native
10-20
Flutter和React Native都是用于移动应用程序开发的跨平台框架。它们都可以使用单个代码库创建iOS和Android应用程序。但是，它们之间也有一些区别。 1.设置方面：Flutter和React Native都需要额外的组件，但是如果您的PC上已经安装了Node.js和NPM，那么使用React Native的设置过程似乎比使用Flutter更容易。 2.文档和社区：React Native没有提供像Flutter那样全面和全面的文档，但是React Native拥有庞大的用户社区和大量有用的指南，这提供了立即找到必要解决方案的机会。 3.UI元素和原生模块：React Native框架仅提供UI渲染和设备访问API。当需要访问原生模块时，React Native很大程度上依赖于第三方库。所以正因为如此，它不如Flutter。当然React Native能够使用来自第三方库的大量组件和UI元素，但无法访问它们，React Native的特点是元素数量少于Flutter。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值