跨平台技术篇 - React Native 从入门到放弃

为什么要放弃学习 React Native 呢？先总结一下 React Native 的优缺点，再来说说原因。

 

1. React Native 的优缺点

目前有许多的跨平台框架，比如基于 WebView 的 Cordova、AppCan 等，使用 HTML+JavaScript 渲染成原生控件的 React Native、Weex，以及目前如日中天的 Flutter。

基于 WebView 的框架优点很明显，它们几乎可以完全继承现代 Web 开发的所有成果 (丰富得多的控件库、满足各种需求的页面框架、完全的动态化、自动化测试工具等等)，当然也包括 Web 开发人员，不需要太多的学习和迁移成本就可以开发一个 App。同时 WebView 框架也有一个致命 (在对体验&性能有较高要求的情况下) 的缺点，那就是 WebView 的渲染效率和 JavaScript 执行性能太差。再加上 Android 各个系统版本和设备厂商的定制，很难保证所在所有设备上都能提供一致的体验。

为了解决 WebView 性能差的问题，以 React Native 为代表的一类框架将最终渲染工作交还给了系统，虽然同样使用类 HTML+JS的 UI 构建逻辑，但是最终会生成对应的自定义原生控件，以充分利用原生控件相对于 WebView 的较高的绘制效率。与此同时这种策略也将框架本身和 App 开发者绑在了系统的控件系统上，不仅框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API 的变化，开发者可能也需要处理不同平台的差异，甚至有些特性只能在部分平台上实现，这样框架的跨平台特性就会大打折扣。

总结下 React Native 的优点：

• 它对比原生开发更为灵活，对比 H5 体验更为高效。
• 替代传统的 WebView，打开效率更高，和原生之间的交互更方便。
• 多个版本迭代后的今天，它已经拥有了丰富第三方插件支持。
• React Native 解决不了的，可以通过各位熟悉的原生来解决，互补益彰。
• 更方便的热更新。

React Native 的缺点：

• 尽管是跨平台，但是不同平台 API 的特性与显示并不一定一致。
• 相对增大了 app 的体积。
• 调试相对麻烦。
• Android 上的兼容性问题。

那既然有了更优更好的跨平台技术 Flutter，我为什么还要研究过时的东西呢？而且我本身不擅长 JS，投入的学习成本不如放在更优更好的框架上。对于 React Native，我只需要知道它的大体思路，解决方案，优缺点即可。

 

 

2. 为什么要学习 Flutter?

Flutter 开辟了一种全新的思路，从头到尾重写一套跨平台的 UI 框架，包括 UI 控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的 Skia 图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持 AOT 的 Dart 语言，执行效率也比 JavaScript 高得多。

Flutter 同时支持 Windows、Linux 和 macOS 操作系统作为开发环境，并且在 Android Studio 和 VS Code 两个 IDE 上都提供了全功能的支持。Flutter 所使用的 Dart 语言同时支持 AOT 和 JIT 运行方式，JIT 模式下还有一个备受欢迎的开发利器"热刷新" (Hot Reload)，即在 Android Studio 中编辑 Dart 代码后，只需要点击保存或者 "Hot Reload" 按钮，就可以立即更新到正在运行的设备上，不需要重新编译 App，甚至不需要重启 App，立即就可以看到更新后的样式。

在 Flutter 中，所有功能都可以通过组合多个 Widget 来实现，包括对齐方式、按行排列、按列排列、网格排列甚至事件处理等等。Flutter 控件主要分为两大类，StatelessWidget 和 StatefulWidget，StatelessWidget 用来展示静态的文本或者图片，如果控件需要根据外部数据或者用户操作来改变的话，就需要使用 StatefulWidget。State 的概念也是来源于 Facebook 的流行 Web 框架 React Native，React Native 风格的框架中使用控件树和各自的状态来构建界面，当某个控件的状态发生变化时由框架负责对比前后状态差异并且采取最小代价来更新渲染结果。

而且现在很多大公司都在使用 Flutter，它确实更有优势，github 上也有很多基于 Flutter 的开源项目，最重要的是 Google 在一直更新优化它。