求索阁

跨平台的市场优势不在于性能或学习成本，甚至平台适配会更耗费时间，但是它最终能让代码逻辑（特别是业务逻辑），无缝的复用在各个平台上，降低了重复代码的维护成本，保证了各平台间的统一性， 如果这时候还能保证一定的性能，那就更完美了。

一、环境搭建

无论是 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 的“黑洞”属性和依赖复杂度等原因，目前在个人接触的例子中，首次配置运行成功率 Flutter 是高于 React Native 的，且 Flutter 失败的原因则大多归咎于网络。

二、实现原理

在 Android 和 IOS 上，默认情况下 Flutter 和 React Native 都需要一个原生平台的 Activity / ViewController 支持，且在原生层面属于一个“单页面应用”， 而它们之间最大的不同点其实在于 UI 构建 ：

React Native ：

React Native 是一套 UI 框架，默认情况下 React Native 会在 Activity 下加载 JS 文件，然后运行在 JavaScriptCore 中解析 Bundle 文件布局，最终堆叠出一系列的原生控件进行渲染。

简单来说就是 通过写 JS 代码配置页面布局，然后 React Native 最终会解析渲染成原生控件，如 <View> 标签对应 ViewGroup/UIView ，<ScrollView> 标签对应 ScrollView/UIScrollView ，<Image> 标签对应 ImageView/UIImageView 等。

所以相较于如 Ionic 等框架而言， React Native 让页面的性能能得到进一步的提升。

Flutter ：

如果说 React Native 是为开发者做了平台兼容，那 Flutter 则更像是为开发者屏蔽平台的概念。

Flutter 中只需平台提供一个 Surface 和一个 Canvas ，剩下的 Flutter 说：“你可以躺下了，我们来自己动”。

Flutter 中绝大部分的 Widget 都与平台无关， 开发者基于 Framework 开发 App ，而 Framework 运行在 Engine 之上，由 Engine 进行适配和跨平台支持。这个跨平台的支持过程，其实就是将 Flutter UI 中的 Widget “数据化” ，然后通过 Engine 上的 Skia 直接绘制到屏幕上 。

所以从以上可以看出：React Native 的 Learn once, write anywhere 的思路，就是只要你会 React ，那么你可以用写 React 的方式，再去开发一个性能不错的App；而 Flutter 则是让你忘掉平台，专注于 Flutter UI 就好了。

DOM：

额外补充一点，React 的虚拟 DOM 的概念相信大家都知道，这是 React 的性能保证之一，而 Flutter 其实也存在类似的虚拟 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 端一直不温不火，直到 17年 才因为 Flutter 而受关注起来，之后又因为 Flutter For Web 继续尝试后回归 Web 领域。

编程开发所涉及的点较多，后面主要从 开发语言 、界面开发 、状态管理 、原生控件 四个方面进行对比介绍。

3.1、语言

因为起初都是为了 Web 而生，所以 Dart 和 JS 在一定程度上有很大的通识性。

但是它们之间的差异性也很多，而最大的区别就是： JS 是动态语言，而 Dart 是伪动态语言的强类型语言。动态语言和非动态语言都有各种的优缺点，比如 JS 开发便捷度明显会高于 Dart ，而 Dart 在类型安全和重构代码等方面又会比 JS 更稳健。

3.2、界面开发

React Native 在界面开发上延续了 React 的开发风格，支持 scss/sass 、样式代码分离、在 0.59 版本开始支持 React Hook 函数式编程 等等，而不同 React 之处就是更换标签名，并且样式和属性支持因为平台兼容做了删减。

如下图所示，是一个普通 React Native 组件常见实现方式，继承 Component 类，通过 props 传递参数，然后在 render 方法中返回需要的布局，布局中每个控件通过 style 设置样式 等等，这对于前端开发者基本上没有太大的学习成本。

Flutter 最大的特点在于： Flutter 是一套平台无关的 UI 框架，在 Flutter 宇宙中万物皆 Widget。

而对于 Flutter 控件开发，目前最多的吐槽就是 控件嵌套和样式代码不分离 ，样式代码分离这个问题我就暂不评价，这个真要实际开发才能更有体会，而关于嵌套这里可以做一些 “洗白” ：

Flutter 中把一切皆为 Widget 贯彻得很彻底，所以 Widget 的颗粒度控制得很细 ，如 Padding 、Center 都会是一个单独的 Widget，甚至状态共享都是通过 InheritedWidget 共享 Widget 去实现的，而这也是被吐槽的代码嵌套样式难看的原因。

事实上正是因为颗粒度细，所以你才可以通过不同的 Widget ， 自由组合出多种业务模版， 比如 Flutter 中常用的 Container ，它就是官方帮你组合好的模板之一， Container 内部其实是由 Align、 ConstrainedBox 、DecoratedBox 、Padding 、Transform 等控件组合而成 ，所以嵌套深度等问题完全是可以人为控制，甚至可以在帧率和绘制上做到更细致的控制。

当然，官方也在不断地改进优化编写和可视化的体验.

最后总结一下，抛开上面的开发风格，React Native 在 UI 开发上最大的特点就是平台相关，而 Flutter 则是平台无关，比如下拉刷新，在 React Native 中， <RefreshControl> 会自带平台的不同下拉刷新效果，而在 Flutter 中，如果需要平台不同下拉刷新效果，那么你需要分别使用 RefreshIndicator 和 CupertinoSliverRefreshControl 做显示，不然多端都会呈现出一致的效果。

3.3、状态管理

前面说过， Flutter 在很多方面都借鉴了 React Native ，所以在状态管理方面也极具“即视感”，比如都是调用 setState 的方式去更新，同时操作都不是立即生效的 ，当然它们也有着差异的地方，如下代码所示：

正常情况下 React Native 需要在 Component 内初始化一个 this.state 变量，然后通过 this.state.name 访问 。

Flutter 继承 StatefulWidget ，然后在其的 State 对象内通过变量直接访问和 setState 触发更新。

当然它们两者的内部实现也有着很大差异，比如 React Native 受 React diff 等影响，而 Flutter 受 isRepaintBoundary 、markNeedsBuild 等影响。

而在第三方状态管理上，两者之间有着极高的相似度，如早期在 Flutter 平台就涌现了很多前端的状态管理框架如：flutter_redux 、fish_redux 、 dva_flutter 、flutter_mobx 等等，它们的设计思路都极具 React 特色。

同时 Flutter 官方也提供了 scoped_model 、provider 等具备 Flutter 特色的状态管理。

所以在状态管理上 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 定义好的 Widget 并带上 textureId ，那么 Engine 在渲染时，就会在内存中将 textureId 对应的数据渲染到 AndroidView 上。

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:\Users\xxxxx\AppData\Roaming\Pub\Cache 路径下

mac 目录在 ~/.pub-cache

如果找不到插件目录，也可以通过查看 .flutter-plugins 文件，或如下图方式打开插件目录，至于为什么需要打开这个目录，感兴趣的可以看看这个问题.

最后说一下 Flutter 和 React Native 插件，在带有原生代码时不同的处理方法：

React Native 在安装完带有原生代码的插件后，需要执行 react-native link 脚本去引入支持，具体如 Android 会在 setting.gradle 、 build.gradle 、MainApplication.java 等地方进行侵入性修改而达到引用。

Flutter 则是通过 .flutter-plugins 文件，保存了带有原生代码的插件 key-value 路径 ，之后 Flutter 的脚本会通过读取的方式，动态将原生代码引入，最后通过生成 GeneratedPluginRegistrant.java 这个忽略文件完成导入，这个过程开发者基本是无感的。

所以在插件这一块的体验， Flutter 是略微优于 React Native 的。

五、编译和产物

React Native 编译后的文件主要是 bundle 文件，在 Android 中是 index.android.bunlde 文件，而在 IOS 下是 main.jsbundle 。

Flutter 编译后的产物在 Android 主要是 ： - isolate_snapshot_instr 应用程序指令段 - isolate_snapshot_data应用程序数据段 - vm_snapshot_data 虚拟机数据段 - vm_snapshot_instr 虚拟机指令段等产物

注意，1.7.8 之后的版本，Android 下的 Flutter 已经编译为纯 so 文件。

在 IOS 主要是 App.framework ，其内部也包含了 kDartVmSnapshotData 、kDartVmSnapshotInstructions 、 kDartIsolateSnapshotData 、kDartIsolateSnapshotInstructions 四个部分。

接着看完整结果，如下图所示，是空项目下 和 GSY 实际项目下， React Native 和 Flutter 的 Release 包大小对比。

可以看出在 React Native 同等条件下， Android 比 IOS 大很多 ，这是因为 IOS 自带了 JSCore ，而 Android 需要各类动态 so 内置支持，而且这里 Android 的动态库 so 是经过了 ndk 过滤后的大小，不然还会更大。

Flutter 和 React Native 则是相反，因为 Android 自带了 skia ，所以比没有自带 skia 的 IOS 会小得多。

以上的特点在 GSY 项目中的 Release 包也呈同样状态。