Flutter or ReactNative ？

Posted 2021-04-29 DeveloperPython

本篇预计阅读时间 5 分钟，文末有段子

1、跨平台 + ReactNative + Flutter

ReactNative 大家应该不陌生。不过我还是简单的介绍下， ReactNative 的简称是 RN ，是前几年 Facebook 开源的一个跨平台的框架。

什么是跨平台？

如果你是移动开发者的话，应该知道 android 是使用 Java 语言来开发而 ios 则是 OC 来开发，当然我说的是通常情况下使用这两种语言来开发的。

所以各大科技圈大佬们都在绞尽脑汁的想统一这两个平台，无论 Android 还是 iOS 都是移动端，若能统一用一套语言开发应用那最好不过的。这也正是跨平台的意思，简单的说就是你写的同一套代码可以运行在不同的平台。

而 ReactNative 正是跨平台的产品，在 javascript 和 React 的基础上你可以获得完全一致的开发体验。你若是 Android 开发者也可以很轻松的开发出来 iOS 的产品。

那么 Flutter 是什么？

其实这也是一个跨平台的框架，在 GDD 会议之前我其实并不了解这个。这是 Google 在近年来开发出来的一个框架，也是用来达到跨平台的效果。不过现在还处于 Alpha 阶段。

2、Flutter 和 ReactNative 的区别

一个是 Facebook 推出两年多的 RN ，另一个则是 Google 这种顶级科技公司的产品。那么它们有什么区别呢？

玩过 ReactNative 的朋友应该或多或少看过它的源码，从实现原理上来讲 ReactNative 提供的组件都是继承自原生 Native 的 View 组件，比如ReactNative 中的 ListView 在 Android 中就是继承自 ListView ，还有 RecycleView。

然而 Flutter 则不同，它的所有 UI 组件都是一帧一帧画出来的。这样也能够很准确，也很灵活的做出你想要的 UI 。其次它还非常人性化的贴近了平台的特性，比如 Android 的 Material Design 在 Flutter 就默认支持了进去。

其实话说回来，在开发者角度来讲这两个跨平台都是一样的使用效果，毕竟都是通过一套语言来搭建可运行不同平台的应用。然而，Flutter 使用 Dart 语言开发而 ReactNative 则使用 JS 结合 XML 来开发的。这就有问题了。

3、Dart 语言开发的 Flutter 框架

相信并没有几个读者知道还有 Dart 这种语言，说实话在这次大会之前我也不知道。不过还好在那场会议上面，他们的工程师亲自演示了用 Dart 语言的 Flutter 来搭建了一个应用。也着实让我大跌眼镜。

为什么这么说呢？因为用 Dart 语言来写界面真的是看着很不友好。我来贴一段代码，这是用 Dart 写的一个简单的 UI 组件。

作为初次了解到 Dart 得我一眼看去，真的不知道这写了个什么。因为括号太多了，各种嵌套。而且是直接将子 View 整段嵌进去，如果这个 View 更加复杂的话，你就会看到更多的嵌套。

而相比 ReactNative 中 JS 和 XML 的写法，无论从逻辑上可通读性都是有一定差距的：

其实话说白了，这也正是 Dart 和 JS 的区别。今天我也抽空搜了下 Dart 这个语言，说 Dart 是非常有能力替代 JS 的代码，而且 Dart 的开发者也是这么认为的。他们的目标就是 JS 的开发者会选择用 Dart 来开发。但。。。

4、为什么Flutter 用 Dart 开发

在会后，我也主动的去找 Flutter 的开发专家 Divod 聊了会。我问到他一个问题，我说为什么你们会选择用 Dart 语言来开发而不选择用XML 和 JS ，从刚才您的代码示例上我的第一感觉就是没有 ReactNative 的可读性高。

大家也许觉得我太大胆，在 Google 的场子提 Facebook 的东西。但技术毕竟是技术，程序员何苦为难程序员，这是一场技术的交流。最后，他也给了我一个满意和无力反驳的答案，“因为 Dart 的开发团队就在他们旁边，他们能给到我们很快的支持。我们能很快沟通到”。

所以我也就默认了 Flutter 注定会一直使用 Dart 这门语言。

5、亲测 Flutter 框架

当然今天我也抽空玩了一把 Flutter 。我把之前在 ReactNative 遇到问题的情况也同样在 Flutter 上实现了一下。

“用 ListView 加载上千张大图”。

在 ReactNative 和 Flutter 的表现上来看内存和 CPU 的使用量并没太大区别，但在页面渲染上 ReactNative 并没有 Flutter 流畅。而且图片量越大， ReactNative 的渲染速度会更慢，甚至是会爆掉。

ReactNative 

Flutter

所以，无论是 Flutter 还是 ReactNative，更或者 Weex 其实都是业界很不错的跨平台框架。只不过从版本历史还是开发人数上来讲，我更倾向于 ReactNative。

因为我是一个 Facebook 粉。