Flutter和RN对比

前言

本人目前负责的项目是原生+Webview方式开发的，由于Webview的体验不太友好，所以决定选择一种混编的方式，选择一种跨平台的技术来提升改善Webview的体验，通过各种权衡考虑使用了RN，虽然目前RN在重构，但是没有人可以否认目前RN的霸主地位，我相信它会越来越好的，本章节就不说RN了，接下来说说Google的Flutter。

Flutter Demo项目地址 : Flutter-App

Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。
Flutter 是由 Google 的工程师团队打造的，用于创建高性能、跨平台的移动应用的框架。
Flutter 针对当下以及未来的移动设备进行优化，专注于 Android and iOS 低延迟的输入和高帧率
Flutter的设计跟react-native很像，但是比RN进了一步
Flutter的开发语言是Dart

移动端跨平台开发技术演进

现在主流的移动开发平台是Android和iOS，之前还有过windows phone。从最开始的Hybrid混合开发技术，到RN的桥接技术，到现在新兴的Flutter技术，跨平台开发技术一直在演进。

跨平台开发第一个考虑的就是性能问题

RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好;

Flutter 吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染

react-native框架原理图

Flutter实现跨平台采用了更为彻底的方案。它既没有采用WebView也没有采用JavaScriptCore，而是自己实现了一台UI框架，然后直接系统更底层渲染系统上画UI。所以它采用的开发语言不是JS，而Dart。据称Dart语言可以编译成原生代码，直接跟原生通信。

Flutter框架原理图

Flutter将UI组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas，以便定制的UI组件可以出现在设备的屏幕上，以及访问事件（触摸，定时器等）和服务（位置、相机等）。这是Flutter可以做到跨平台而且高效的关键。另外Flutter学习了RN的UI编程方式，引入了状态机，更新UI时只更新最小改变区域。

系统的UI框架可以取代，但是系统提供的一些服务是无法取代的。Flutter在跟系统service通信方式，采用的是一种类似插件式的方式，或者有点像远程过程调用RPC方式。这种方式据说也要比RN的桥接方式高效。

Flutter与RN异同

Flutter性能会更好无线接近原生的体验,Dart是AOT编译的，编译成快速、可预测的本地代码
RN采用JS语言开发，基于React，对前端工程师更友好。Dart语言受众小
Flutter自己实现了一套UI框架，丢弃了原生的UI框架。而RN还是可以自己利用原生框架，两个各有好处。Flutter的兼容性高，RN可以利用原生已有的优秀UI
RN的布局更像css，而Flutter的布局更像native布局，但是去掉xml通过代码直接写需要适应下
Flutter的第三方库还很少，RN发展的早，虽然也还不完善，Flutter github还有3000多个issues要解决，还有很长的路要走。