Flutter和SwiftUI比较

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，如界面需要更新数据，则界面使用StatefulWidget
• React Native，因为是基于React Web框架之上封装的原生支持，所以数据状态就是React本身state用法

3.本地数据存储

重要的数据不要存储在本地，本地都是缓存一些断网能预览的数据

• SwiftUI, KeyChain, SQLite(FMDB, CoreData), 直接写入文件，NSUserDefaults，NSKeyedArcher
• Flutter, 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 ，然后使用两个宏 RCT_EXPORT_MODULE 导出类即表示模块，RCT_EXPORT_METHOD导出方法，定义完后，在RN侧通过NativeModules调用。Swift建一个和ObjC用bridgingHeader
• • 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