0.语言
SwiftUI 毫无疑问是Swift语言编写，
在2019年正式推出，目前最新是Swift 5.9 (2023年9月)，由Apple公司维护和发行；
该编程语言发明人已离职Apple。
语言官网：https://developer.apple.com/swift/ 最好用Xcode编写代码 Flutter 使用Dart语言编写，
在2017年正式推出，目前最新版本是Flutter v3.13, Dart v3.1 (2023年8月)，由Google公司维护和发行；
该编程语言发明人已离职Google。
官网：https://flutter.dev/ 可使用vscode编写代码 React Native 使用Javascript/TypeScript编写
在2015年推出，目前最新版本0.72，由Meta(原Facebook)公司维护和发行
官网是：https://reactnative.dev
1.页面布局
SwiftUI使用view为基础，以声明式(declarative syntax)语法布局用户界面；
View，视图可以现实文字，图片，图标，音频等等
HStack，水平方向布局，相当于excel表格里的行(row)
VStack，垂直方向布局，相当于excel表格里的列(column)
ZStack，Z轴布局，可以图层叠加
Grid和GridRow格子布局
List 列表布局
ScrollView，页面可以滚动
animation()，控件后面使用.修饰符，传入参数动画样式
页面跳转，.sheet()类似模态打开，NavigationLink类似push打开 Flutter使用widget为基础，以声明式(declarative syntax)语法布局用户界面，分为StatelessWidget和StatefulWidget
Widget, 相当于视图，可以包括显示文字，图片，图标，音频等等
Row，水平方向布局，相当于excel表格里的行(row)
Column，垂直方向布局，相当于excel表格里的列(column)
StackZ轴布局，可以视图叠加
GridView格子布局
ListView 列表布局，item会复用，类似iOS的UITableView和Android的RecyclerView
SingleChildScrollView，页面可以滚动
Animation，控件嵌套包裹住希望的控件，然后传入参数动画样式
页面跳转，Navigator.push 和 Route React Native使用React的View布局，语法与react前端开发基本一致
View，对应安卓的ViewGroup，对应iOS的UIView，对应H5就是div
Text，对应安卓的TextView，对应iOS的UITextView，对应H5就是p
Image，对应安卓的ImageView，对应iOS的UIImageView，对应H5就是img
ScrollView，对应安卓的ScrollView，对应iOS的UIScrollView，对应H5就是div
TextInput，对应安卓的EditText，对应iOS的UITextView，对应H5就是
FlatList，只有一组，item数据结构相同，对应安卓的ListView，对应iOS的UITableView(但numberOfSections是1)
SectionList，分组列表，每组的数据结构可以是不同的，对应安卓的ListView，对应iOS的UITableView(而numberOfSections可以是多个)
页面跳转，StackNavigator TabNavigator DrawerNavigator
SwiftUI和Flutter的样式：前者是写在控件后面，后者是控件嵌套。
React Native的样式：
1.使用StyleSheet.create来创建和css类似的写法样式，
2.使用app.module.css的独立文件来写标准CSS样式。
iOS使用pt，安卓使用dp，flutter和ReactNative使用px
2.数据绑定
SwiftUI使用声明式属性修饰符@State绑定数据，一旦状态发生变化，则会重新计算一个视图界面里的首要body属性Flutter，若界面不依赖数据更新，则使用StatelessWidget，如界面需要更新数据，则界面使用StatefulWidgetReact Native，因为是基于React Web框架之上封装的原生支持，所以数据状态就是React本身state用法
3.本地数据存储
重要的数据不要存储在本地，本地都是缓存一些断网能预览的数据
SwiftUI, KeyChain, SQLite(FMDB, CoreData), 直接写入文件，NSUserDefaults，NSKeyedArcherFlutter, shared_preferenced(安卓原生，iOS是NSUserDefaults), SQLite, Firebase_database, KeyStore(对应iOS的KeyChain类似安全级别）React Native, 开源库async-storage 是key-value结构的；Realm(开源也有收费的serverless数据库，本地和远程同步)
4.React Native调用原生的类和函数
Flutter，MethodChannel，在iOS/Android端和Flutter定义相同的名字的通道，当flutter调用invokeMethod方法时，原生会收到请求，原生处理完任务后，通过回调给到flutter端
a.通过MethodChannel，flutter调用原生，原生返回结果
b.通过EventChannel，flutter和原生建立一个stream，这样就可以双工通信
c.通过BasicMessageChannel，简单的消息在双向发送和接收 React Native，
a.针对iOS平台，在ObjC里，创建一个类继承NSObject
b.针对Android平台，在Java/Kotlin里，创建一个类继承ReactContextBaseJavaModule，实现getName()方法，将需要导出给RN调用的java方法使用@ReactMethod修饰，那么在RN里，就通过NativeModules来调用模块和它的方法。
5.系统API调用
例如系统的摄像机、麦克风、GPS、陀螺仪，等等
SwiftUI直接使用，因为SwiftUI是基于iOS操作系统已存在的布局体系上建立；Flutter使用plugin来调用，如果plugin没有，则可以自己通过原生代码封装；React Native使用NPM的package，跟flutter类似，双端封装，iOS和Android各自实现功能，然后导出给RN去调用。
6.编译和性能
SwiftUI，开发和生成期间编译都是AOT (Ahead-of-Time)，编译时会将高级的Swift代码转换成低级的机器码，并对iPhone，iPad，MacOS做了深度优化；开发期间支持view在Xcode即可预览效果。Flutter，开发期间编译使用JIT (Just-In-Time)，支持hot-reload；部署生产期间使用AOT (Ahead-of-Time)，为了对iOS和Android更高的ARM code优化。React Native，使用Hermes，它是一个Javascript Engine专门为React Native优化的，默认启用，如果关闭的话，就使用JavaScriptCore。
7.渲染引擎
SwiftUI，是Apple的原生布局框架，高效的集成了Apple的硬件性能和简单易用的API。Flutter，使用Skia引擎(Skia是一个开源的2D图形库，由C++编写)，这是跨平台的，因此和某个具体平台无关，渲染时需要提交到硬件加速，可以开发丰富的和可交互式的UI。React Native，使用Fabric渲染框架
8.内存回收算法
SwiftUI，是从ObjC沿袭而来的ARC自动引用计数算法，对象用的时候引用计数+1，用完要释放-1，直到是0的时候，对象会被释放。对于循环引用问题使用weak解除Flutter，是分代回收算法，分为新生代和老年代，GC会检查变量的引用，新创建的或者周期短的对象会被标记为新生代，当达到一定的生命周期（也就是用了一段时间后还不能被GC清除）就会被标记并移动到老年代，最后直到可以被清除为止。对于循环引用问题使用WeakReference解除React Native，以Javascript引擎为准，不同的浏览器实现的GC有所不同。但是垃圾回收算法基本都是以标记清除为基准，不同浏览器的JavaScript引擎（如V8引擎用于Chrome和Node.js，SpiderMonkey用于Firefox等） – a.垃圾回收的频率和时机：不同的引擎可能会选择在不同的时间进行垃圾回收，以平衡性能和内存使用。 – b.增量收集和空闲时收集：一些现代浏览器的JavaScript引擎采用增量收集和空闲时收集，以减少应用程序执行中的停顿。 – c.内存限制和优化：不同的浏览器可能对脚本可使用的最大内存量有不同的限制。
引用
1.Flutter官方分析区别，Flutter和SwiftUI：https://docs.flutter.dev/get-started/flutter-for/swiftui-devs?tab=swiftui 2.React Native的Flutter的对比：https://docs.flutter.dev/get-started/flutter-for/react-native-devs
推荐阅读
您阅读本篇文章共花了：
发表评论