跨端开发，flutter和react native如何选择

Posted 2021-04-03 张富涛的学习笔记

这是张富涛的第14篇原创

跨端开发，flutter和react native如何选择

1. 传统方案的瓶颈 和 flutter及RN要解决的问题

五六年前智能手机开始逐渐普及大众，从此android和ios便成为移动端coder的舞台，在我还上学那会儿，“分班”的时候移动端就已经可以两端择一，那时候，如果一家企业需要做移动端，至少需要有会IOS和Android的员工，不然就会面对一个平台产品缺失和用户流失的问题，但如果都招，面临的必然是“成本较大”、“双端功能同步更新”等问题。

那时候“一套代码生成双端原生应用”还没有太好的解决方案，不如说这些方案还不够成熟，所以后续几年，自适应+h5（html5）一直是大家探索的主要方向，基本上是原生应用只是做为框子，使用webview的组件嵌套web网页，即具体展示的内容页面本质还是html。

上图为我的毕设app，其中使用原生代码编写，提供简单的标签和页面切换，具体的业务还是以html展示，而html做了自适应，自适应框架以bootstrap最为广为人知（不了解bootstrap不影响本文阅读）。

这样的技术方案目前依然有很多企业使用，优势很明显，移动端并不用过多涉及产品业务，只提供最简单的交互即可，那么具体的业务可以让服务器和web端的研发进行处理，这大大的节省了沟通、移动端同学了解业务的成本。但这种方案也有比较明显的劣势，如“如何调用原生应用的api”，“交互方面并不友好，主要表现为在执行'后退'操作时，webview会后退到'上一个网页'，而非退掉当前的原生页面（activity）”。

基于用户交互体验、节约研发成本的原生应用需求，flutter和react native等框架也应运而生。

2. 技术如何选型？

首先特别要说明的是，这两种语言并不存在“要凉”的情况，这两种语言在特定的需求领域都活的很滋润。我们没必要争类似“php是最好的语言”这种问题进行党派之争。

任何语言、框架都是一种为了服务业务、满足需求、适应当前情况而存在的。互联网是不讲道理的，一切取决于“更快的上手”、“更快的开发”，是以“商业”为核心运转的。 虽然不同语言、框架存在细节的优劣势，但技术选型时，更应该以上述内容进行优先考虑。在后面大段说明解释前，先说下我的结论：

• 如果你（或项目组的人员）不了解前端技术，或对react并不了解。但你有后端或部分Android或IOS开发经验，我建议选择flutter
• 如果你（或项目组的人员）是一名前端研发，对react了解或感兴趣，或未来react在你的技术栈规划上，建议选择react native

值得一提的是，学习react native 和 flutter 都不需要你掌握原生的代码写法。

在此笔者建议读者看完后文，可能你会有更多想法

3. 语言细节优劣势

随着这几年语言的发展，flutter和react native已经成为此领域的佼佼者。如今大厂纷纷使用试探，相关的生态也逐步完善，目前这两种语言虽然仍然有bug和种种可能让研发烦恼到砸键盘的情况，但已经可以尝试。

基于第2章节，个人并不建议语言细节在技术选型方面占据很大影响力，但可以作为补充和参考。

笔者并没有尝试react native开发，但查阅了很多资料，在此希望能通过资料汇集的方式节约读者的时间，这也是笔者能贡献的微薄之力。由于也是初次接触，且研究时间较短，可能有写的不全面的地方，敬请谅解。而如有误写，欢迎指正。

首先值得一提的是，目前还是react native在大厂的采用较多，这源于框架起源早，但这两年flutter也逐渐成熟，更多内容见第4章节，在此不多做赘述。

3.1 react native

优势：

• 对于前端、js有天生的亲和力，上手门槛对于前端研发较低。
• 对于技术栈适配的web端，可以和移动端很多地方都可以使用一套代码。
• 社区非常活跃，类库代码贡献者很多。
• 语言发展时间长，互联网上有较多的经验积累。

劣势：

• 因这是中转类型的框架，使用JS衔接原生平台的一些功能部分，故相比flutter一套代码“生成”多端应用，原生化不够彻底，部分时候交互不够优秀，遇到特定需求可能需要用代替方案。
• 因为第三方类库较多，同时有非常多的贡献者，可能相比flutter，参差不齐的情况更多，需要你更多的fork三方库更改的能力

3.2 flutter

优势：

• 这个框架的爸爸是google，一直在维护并逐渐被市场使用。
• 更彻底的原生，在跨平台和兼容方面做得更加彻底。同时跨平台布局可穿戴设备，汽车，智能家电，有鸿蒙os内味儿了。（但笔者并未进行过多研究，也无法提供在其他智能设备上的目前框架进度）
• 语言和开发思路习惯对拥有移动端原生应用开发者更加友好。
• 基于google提供了新的语言Dart研发，并提供热部署等能力。

劣势：

• Dart语言有了一点新的学习成本。
• Dart拥有嵌套地狱式的写法，这是很多研发诟病的，google也为此开发了一系列ide的框架解决这个问题，但一些程序员依然对此反感。

4. 市场份额-语言使用情况

通过知乎作者“恋猫”（@carguo）的统计得知：

分析了 53 框大厂的应用，其中明面上：

• 带有 flutter 的有 20 款；
• 带有 react-native 的有 22 款；
• 带有 weex 的有 17 款；

本文仅做转载，感谢这位作者对此贡献，具体统计结果，建议跳转至该作者文章查看

国内大厂在移动端跨平台的框架接入分析https://juejin.cn/post/6844904177949212680[https://juejin.cn/post/6844904177949212680]

长按下图二维码关注：