- 混合式开发为什么能做到热重载技术,热重载原理是什么
- Android原生,ReactNative,Flutter 从三大纬度(UI显示原理,状态更新机制,编译流程)看技术更新规律
1、系统设计架构
对比 Android原生、ReactNative、Flutter 三者在设计上不同的理念
UI显示流程
状态更新机制
编译流程
1)、UI显示流程
通过layout布局决定UI效果,其中样式文件和界面元素写在布局中,更新的功能写在代码中
总结:性能高效,开发者使用死板,通过文件的方式强行将代码与布局分离
React独创了Virtual DOM机制 Virtual DOM是一个存在于内存中的 JavaScript对象,它与DOM是一一对应的关系,也就是说只要有Virtual DOM ,我们就能渲染出DOM ,当界面发生变化时,得益于高效的DOM Diff算法,我们能够知道 Virtual DOM 的变化,从而高效的改变DOM ,避免重新绘制DOM ,通过DOM映射成原生控件显示在屏幕上
总结:React是一个专注于UI部分框架,做UI架构很牛逼, 毕竟会存在DOM与原生控件的映射,避免性能会有些损耗,但是相对于HTML还是高出很多
基于dart描述的UI效果 直接通过Skia图像处理引擎渲染到界面上。没有虚拟的DOM ,也没有原生映射,性能相对于原生还会高一些。
总结:性能虽高效,热重载技术,设计架构也都是Google出产,但是目前不太稳定,支持的生态有限
以上是这一点的简单总结,至于如何选择,还看自己的需求。。。
2)、状态更新机制:
Android 几乎全靠开发者双手完成状态更新,比如TextView发生变化,需要findViewById然后setText,虽然目前有MVVM非常优秀的设计模式,单这并不是一种完美的状态机制,只不过让你的代码少一些
备注:真正的状态机制是指数据状态有周期,有传递特性,也能也能因为数据改变影响UI。在Android 中是没有这种设计机制的
万物皆组件,界面,按钮,Text都是组件,有组件就有状态,有状态就会发生相互传递 ,数据发生改变实时影响UI
所有组件分为两类 :有状态,无状态的,由于不是基于DOM展开,有状态的组件性能会开销大,因为需要底层进行实时监听。其他的都和ReactNative设计理念一样,只不过底层细节不一致。
3)、编译流程
Android的编译流程:
Java文件编译成Class,然后被dex工具编译成dex,最终打包成APK文件,随后通过adb命令安装到手机中
Java文件发送变化时,上述流程需要重新来一遍,安装到手机中,才能看到最终效果
总结:原生不支持热重载技术,最根源还是在于class的编译机制与懒加载机制
ReactNative编译流程:
.JS文件 react-native jar包
总结:通过相同的class加载不同的react文件 ,达到实时刷新界面的目的。
Flutter编译流程:
好了,以上就是对android原生,RN,flutter三种方式的简单对比,记录下来,分享给大家。