首先，寒冬将至，在移动终端跨越平台经历了几年的沉浮之后，至今仍是舞台上的亮点，只有React Native和Flutter 沉淀了数年的“豪门”与19年受欢迎的“新贵”的“对决”也成为开发者们关心的事情
以前，“他写Java也会Object-C，可以同时在Android和IOS平台上开发，为什么还要学习跨平台呢？ ’我曾经被问到
我的回答是，跨平台的市场优势不在于性能和学习成本，而在于平台匹配需要时间，但最终将代码逻辑特别是业务逻辑无缝复用到各平台，降低重复代码的维护成本，降低各平台的成本
另一方面，环境构建无论是React Native还是Flutter，都需要Android和IOS的开发环境，也就是JDK、Android SDK、Xcode等的环境配置，不同点如下
React Native需要配置npm、node、react-native-cli等 Flutter需要Flutter sdk、Android Studio/VSCode的Dart和Flutter插件 从配置环境来看，Flutter的环境组合比较简单，但React Native的环境配置比较复杂，且由于node_module的“黑洞”属性和复杂性等原因，目前个人接触的例子中
同时跨平台开发以Mac为优先，没有理由
二、实现原理是Android和IOS，默认情况下Flutter和React Native都需要原生平台Activity/ViewController支持，原生级别为“单页APP序列”
React Native :React Native是一组UI框架，缺省情况下，React Native在Activity下加载JS文件，并在JavaScriptCore中运行以分析Bundle文件的布局
简单来说，就是通过编写JS代码来构成页面布局，React Native最终会对其进行分析并将其渲染到本机控件中 例如，标签为ViewGroup/UIView，标签为ScrollView/UIScrollView，标签为ImageView/UIImageView等
因此，React Native比Ionic等框架更能提高页面性能
如果说Flutter:reactnative为开发者
创造了平台兼容性，那么Flutter就好比为开发者屏蔽了平台的概念
在Flutter中，平台只提供一个表面和一个Canvas，其馀的Flutter说:“你可以躺下 自己动起来吧”
Flutter的大部分小部件与平台无关 开发人员基于框架开发App，框架在Engine上运行，Engine自适应，跨平台支持 这个跨平台的支持过程实际上是将Flutter UI的小部件“数据化”，然后直接用Engine的Skia绘制在屏幕上
综上所述，React Native的Learn once、write anywhere的想法是，只要能写React，写React就能开发出性能良好的appflutter让你忘记了平台
DOM :另外，您可能知道React虚拟DOM的概念，这是React的性能保证之一，Flutter中也存在类似的虚拟DOM概念
你可能读过我的Flutter系列文章，在Flutter上我们写的小部件其实并不是真正的渲染控件 这与React Native中的标签类似 小部件就像一个配置文件，由它组成的小部件树不是真正的渲染树
虽然小部件在渲染时经过元素的更改，最后转换为RenderObject，但最终构成的RenderObject树才是“真正的渲染Dom”，小部件的树将发生更改
因此，在实现原理上，React Native和Flutter是完全不同的想法，虽然都有“虚拟DOM这样的概念”，但是React Native的平台关联性很强，Flutter UI的平台关联性很高
三.用于编程开发React Native的JavaScript相信大家都很熟悉 已经24岁的它在多年的发展过程中，在各端的各平台上都有其身影出没 在Facebook的React开始风靡之后，在15年的移动浪潮下推出的React Native给前端的JS开发者带来了技能的扩展
作为Flutter首选语言的Dart语言诞生于2011年，但在2018年发布了2.0 这原本是为了对抗JavaScript而发表的开发语言，但在Web端却是不温不火的 到2017年为止在Flutter上受到关注，之后在Flutter For Web上继续尝试后，回到了Web领域
编程开发涉及的方面很多，后面主要从开发语言、接口开发、状态管理、本机控件四个方面进行比较介绍
最多的吐槽之一就是为什么Flutter团队不选择JS 有时是因为Dart团队在Flutter团队旁边，有时谷歌不想和Oracle相关的东西沾边 同时，React Native的更新已经快四年了，但版本号依然没有突破1.0
3.1、语言
最初是为了Web而出生的，所以Dart和JS在某种程度上有很大的共识
var变量定义、async/await语法糖支持、链异步处理支持(如promise(future ) )以及*/yield语法糖都类似，如以下代码所示
//js vara=1asyncfunctiondosomething ( ) { var result=await xxxx ) ( doAsync ) ).then ) ) RES )={console.log yeldput (更新用户( RES.data ) )； }///Dart var a=1； voiddosomething(async ) varresult=awaitxxxx )； doAsync ( ).then ) ( RES ) {print ) ' ffff )； )； }_loaduserinfo(async*{print ) ( * * * * * * * * * * * * * * * * * ' )； yeldupdateuseraction(RES.data； }复制代码，但区别也很多，最大的区别是JS是动态语言，Dart是伪动态语言的强类型语言
下面的代码可以直接在Dart中将name声明为字符串类型 此外，虽然otherName是用var语法糖声明的，但赋值时实际上是通过自派生来派生类型的 dynamic声明的是真正的动态变量，它将在运行时检测类型
//DartString name='dart '； var otherName='Dart '； 动态动态动态名称='动态日期'； 复制下图中的代码可以最清楚地看到这种差异 在下图的示例中，您将看到:
var i在使用init )方法编译时不确定类型，因为如果未全局声明类型，则会将其指定为dymanic 这与JS内的现象一致 var i=' '； init ) )方法中定义的 此时，由于I已经是强类型字符串，编译器将在I中报告错误，但这种格式在JS动态语言中在缺省编译时不会报告错误
动态语言和非动态语言都有各种各样的优缺点 例如，JS明显比Dart更容易开发，但Dart在类型安全性和代码重构等方面比JS更强大
3.2、接口开发
React Native在接口开发中继承了React的开发样式，支持scss/sass、样式代码分离、版本0.59中的React Hook函数型编程等 另一方面，与React的不同之处在于标签名称的变更，样式和属性的支持为了平台互换性而被削减
典型React Native组件的典型示例，包括继承Component类、在props中传递参数、在render方法中返回所需的布局以及在布局中为每个控件设置样式，如下图所示这对前端开发人员几乎没有什么学习成本
如下所示，如果再配合React Hooks的支持，函数性的开发一定会使整个代码结构更加简洁
Flutter的最大特点是Flutter是一个平台无关的UI框架，在Flutter宇宙中一切都是小部件
如下图所示，在Flutter开发中，通过继承无状态stateless构件控件或有状态stateful构件控件来实现页面，并在相应的构件build [ buildcontextexted
另一方面，关于Flutter控件的开发，目前最多的吐槽是控件的嵌套和样式代码没有分离 暂时不评价样式代码分离这个问题，但这个真的不实际开发一下就不知道 关于嵌套，这里可以进行几个“清洗”
Flutter对小部件的粒度有很好的控制，因为它对所有小部件都很认真 例如，Padding、Center是单独的小部件，甚至通过在inherited小部件上共享小部件来实现状态共享 这也是被吐槽的代码嵌套风格很难看的原因
事实上，正是因为粒度很小，所以可以使用各种小部件自由组合各种业务模板，包括Flutter中常用的Container 这是可以官方组合的模板之一因为容器内部实际上是组合了Align、ConstrainedBox、DecoratedBox、Padding、Transform等控件，所以嵌套的
当然，官方也在不断改进优化的创作和可视化体验 如下图所示，从现在的官方发表来看，可以认为将来这个问题也会进一步改善
最后总结一下，忽略上述开发样式，React Native开发的最大特点是与平台相关，但Flutter与平台无关 例如，下拉刷新在React Native中对每个平台具有不同的下拉刷新效果，而在Flutter中，每个平台可能需要不同的下拉刷新效果 那么，必须分别使用RefreshIndicator和CupertinoSliverRefreshControl进行显示 否则，多样性就会显示出一致的效果
3.3、状态管理
如前所述，Flutter在很多方面都参考了React Native，因此在状态管理方面也非常有“即视感” 例如，在调用setState进行更新的同时，操作并不立即生效 当然，它们也有区别，如以下代码所示
通常，React Native需要在Component中初始化this.state变量，并通过this.state.name进行访问 Flutter继承Stateful构件，并在其state对象中触发变量直接访问和setState更新 ///JS this.state={name: '' }； this.setstate ( { name:' loading ' }； this.state.name//dart varname=' '； setState ( ) ) {name='loading '； )； text(name )复制代码当然，React Native会受到React diff等影响，Flutter会受到isRepaintBoundary、markNeedsBuild等影响
在第三方状态管理中，两者之间有很高的相似性，例如Flutter平台中的许多前端的状态管理框架来说，flutter_redux、fish_redux和dva _ flutter _ fledux
Flutter还正式提供具有Flutter特色的状态管理，如scoped_model和provider
因此，在状态管理中，React Native和Flutter可能非常接近，并附在React上
3.4、原生控制
在跨平台开发中，不得不谈到对现有平台访问的支持，如在Android平台上访问x5浏览器、访问
视频播放框架、访问Lottie视频框架等
此需求由React Native先天支持，社区中也已经提供了类似lottie-react-native的项目 由于React Native的整个渲染过程都在本机层进行，因此访问现有平台控件并不是一件难事 另外，由于经过多年的开发，各种第三方库的质量不同，但数量上的优势很明显
Flutter明显处于不利地位，官方甚至不支持WebView 这实际上与Flutter的实现原理问题有关
Flutter的整体渲染脱离了本机级别，直接与GPU进行交互，因此无法直接插入本机控件 在视频播放实现中，Flutter提供并实现外部纹理设计，但由于此过程所需的数据转换严重限制了其通用性，因此在后续版本中，Flutter提供了PlatformView模型来实现集成
以Android为例，在原生层的Flutter上用Presentation子屏幕显示的原理是利用VirtualDisplay方式，让内存将Android控件绘制到Surface层 VirtualDisplay绘制在Surface的textureId中，并通知Dart层 如果使用在Dart层的AndroidView中定义的小部件并携带textureId，则Engine将在渲染时在内存中渲染与textureId相对应的数据
PlatformView的设计一定会导致性能上的缺陷 最大的是内存占有量的上升，同时也会引起键盘无法弹出#19718黑屏等问题，即使是Android也有可能比外部纹理性能差
到目前为止，对Flutter本机控件的访问不如React Native稳定
四.插件开发React Native和Flutter均支持插件开发 不同之处在于，React Native开发了npm插件，Flutter开发了pub插件
React Native使用npm插件的好处是可以使用丰富的npm插件生态，同时降低前端开发人员的学习成本
但是，使用npm的问题是漏洞太多了 可能会被依赖于npm包的复杂性和深度所迷惑，不知道npm里会有什么 无视安全问题，这里最直观的感受是:“为什么别人能跑，我跑不了？ ”就是说 此外，由于每个项目的node_module都是独立的，所以对于硬盘容量较小的Mac用户来说有点悲伤
Flutter的pub插件默认由pub统一管理，和npm一样支持git链接的安装，但flutter packages get文件一般保存在电脑的统一位置，多个项目
win通常是C:Usersxxxxx
AppDataRoamingPubCache路径下的mac目录位于~/.pub-cache中
如果找不到插件目录，也可以查看. flutter-plugins文件或打开插件目录，如下图所示。 为什么需要打开这个目录，感兴趣的人请看这个问题13#。
最后，我们将讨论Flutter和React Native插件。 如果有本地代码，则处理方法不同。
安装包含本机代码的插件后，React Native必须运行react-native link脚本以部署支持。 具体来说，Android通过setting.gradle、build.gradle、MainApplication.java等进行入侵性修复，而Flutter通过. Flutter-plugins文件进行修复然后，flutter脚本通过读取动态引入本机代码，最后生成一个名为GeneratedPluginRegistrant.java的忽略文件来完成导入。在插件体验中，flutter脚本将
五.编译和产物React Native编译后的文件主要是bundle文件，Android中是index.android.bunlde文件，IOS中是main.jsbundle。
Flutter编译的内容在Android中主要如下所示。
isolate _ snapshot _ instr APP应用程序命令段isolate _ snapshot _ data APP应用程序数据段vm_snapshot_data虚拟机数据段VM _ ssshot
在IOS中主要是App.framework，其内部有kDartVmSnapshotData、kDartVmSnapshotInstructions、kDartIsolateSnapshotData、kdartisolatesnapstesnapapstioruction
然后查看结果，React Native和flutter release包的大小在空项目下和GSY实际项目下进行了比较，如下图所示。
可以看出，在与React Native同等的条件下，安卓比IOS大很多。 这是因为IOS搭载了JSCore，安卓需要各种动态so内置支持。 此外，其中Android的动态库so是经过ndk过滤的大小。 否则，它会变得更大。
Flutter和React Native相反，Android有skia，所以比没有skia的IOS小得多。
以上特征在GSY项目的版本包中也是相同的。
值得注意的是，谷歌play最近发布了《8月不支持 64 位，App 将无法上架 Google Play！》的通知，表示将停止对Android Studio 32位的维护。 React Native必须在0.59或更高版本中支持arm64-v8a格式。
对于Flutter，在打包时指定flutterbuildapk---release---target-platform Android-arm 64即可。
六、说到性能，这是大家关心的概念，但需要注意的是。 无视场景说性能显然不合适。 因为性能和代码质量与复杂性有关。
首先从理论性能来说，理论上Flutter的设计性能比React Native强。 这得益于框架设计理念，Flutter减少OEM小部件直接与CPU/GPU交互的特性决定了其先天能量的优势。
请注意，这里不要用模拟器测试性能。 特别是在IOS模拟器上进行性能测试。 因为Flutter在IOS模拟器中是纯粹的CPU，实际的设备变成GPU硬件加速，同时只能在Release中比较性能。
根据的实现方式，也可能会导致性能损失。 例如，在Flutter中绘制skia时，saveLayer会消耗性能，例如透明合成、clipRRect等，因此可能需要调用saveLayer。 saveLayer会清空GPU绘制的缓存，导致性能损失，并可能在开发过程中丢弃
最后一张照片是去年闲鱼在GSY项目上测试比较的数据。 原文为《流言终结者- Flutter和RN谁才是更好的跨端开发方案？》，截至去年，我们发现Flutter的整体帧频和绘制有明显的优势。
此外，JS和Dart都是单线程APP，利用协和式的概念实现异步效果，而在Flutter中，Dart支持的isolate是完全的异步线程处理，通过Port实现异步效果
七、发展未来之前的《为什么 Airbnb 放弃了 React Native》篇文章，让很多不明就里的吃瓜人觉得React Native被放弃了，之后官方公布的《Facebook 正在重构 React Native，将重写大量底层》公示，再次稳定了军心。
此外，React Native从0.59版开始支持React Hook等功能，通过将原始平台的功能控件从React Native内部分离到社区，控件的单独升级维护得以实现
由于Flutter UI平台的相关性，Flutter现在可以快速响应跨平台的扩展。 虽然React Native有Web和PC等第三方提供支持，但由于平台相关性过高，这几年发展缓慢，Flutter在很短的时间内就推出了Web支持，并扩展到了PC和嵌入式设备。
其中关于Flutter For Web，我相信是大家最关心的话题。 如下图所示，在Flutter的设计逻辑下开发Flutter Web时，甚至无法感知正在开发web APP应用程序。
Flutter Web保留了许多现有的移动端逻辑，只是在Engine层利用Dart2Js的能力来脱颖而出，但目前Flutter Web还处于技术预览阶段，不建议在生产环境中使用
由此可以推测，无论是Flutter还是React Native，都在努力将自己扩展到更多的平台，同时在自己的领域进一步简化开发。
Flutter学习资料免费领取评论区评论领取资料或者可以私信私【学习】领取！
Flutter的思维导图(不管学习什么，只要有学习途径就能做更多) )。
Flutteradvancedlearning的完整手册(有好的基础就能收获更多)；Flutteradvancedlearning的完整视频)交互式学习可以更高效地学习) )
