Android原生、ReactNative、Flutter对比

首先从三者不同的设计理念对比，主要有三部分UI显示流程、状态更新机制、编译流程

UI显示流程

• Android原生

  通过layout布局决定,界面和样式写在布局文件中（xml）页面更新及功能写在代码中

总结：性能高效，通过文件的方式强行将代码与布局分开，操作死板

• ReactNative

  React独创了Virtual DOM机制 Virtual DOM是一个存在于内存中的 Javascript对象 它与DOM是一一对应的关系,也就是说只要有Virtual DOM,我们就能渲染出DOM。当界面发生变化时,得益于高效的DOM Diff算法,我们能够知道Virtual DOM的变化,从而高效的改动DOM,避免了重新绘制DOM,通过DOM映射（反射）成原生控件显示在屏幕上

总结：React是一个专注于UI部分框架，但毕竟会存在DOM与原生控件的映射,难免性能会有些损耗,但是相对于html还是高出很多

• Flutter

  基于dart描述的UI效果，直接通过Skia图像处理引擎渲染到界面上。没有虚拟DOM，也没有原生映射,性能对于原生还会高一些。

总结：性能虽高，热加载技术，框架是Google出的，但目前生态有限

状态更新机制

• Android原生

  Android几乎全靠开发者双手完成状态更新,比如 Textview发生改变需要 findByld然后 setText虽然目前有MVVM非常优秀的设计模式,但这并不是一种完美的状态机制,只不过代码少些了

备注：真正的状态机制是只数据状态有周期,有传递特性,也能因为数据改変了影响影响UI。在Android中是没有这种设计机制的

• ReactNative

  万物皆组件,界面,按钮,Text都是组件,有组件就有状态,有状态就会发生相互传递，数据发生改变实时影响UI

• Flutter

  所有组件分为两类有状态的无状态的。由于不是基于DOM展开,有状态的组件性能会开销大,因为需要底层进行实时监听。其他的都和Reactnative设计理念一样,只不过底层细节不一致

编译流程

• Android编译流程

Android编译流程.png

Java文件编译成Class,然后被dex工具编译成dex最终打包成APK文件,随后通过adb命令安装到手机中Java文件发生変化,上述流程需要重新来一遍,安装到手机中,才能看到最终效果

总结:原生不支持热重载技术最根源还是在于class的编译机制与懒加载机

• ReactNative编译流程

ReactNative编译流程.png

总结:通过相同的class加载不同的js文件达到实时刷新界面的目的,可局部刷新

• Flutter编译流程

Flutter编译流程.png

总结：编译流程里进行adb推送差异文件的