Jetpack Compose
命令式UI（Imperative UI）
什么是命令式UI
在Android开发中，我们目前采用命令式UI开发模式
<!-- 代码经过简化 -->
<LinearLayout
android:orientation="vertical"
... >
<TextView
android:id="@+id/text_view"
android:text="text_old"
... />
<ImageView
android:id="@+id/image_view"
android:src="@drawable/image_old"
android:contentDescription="ImageDescription"
... />
</LinearLayout>
TextView textView = findViewById(R.id.text_view);
ImageView imageView = findViewById(R.id.image_view);
textView.setText("text_new");
imageView.setImageResource(R.drawable.image_new);
- 首先，在XML中定义布局
- 当需要更新UI时，通过View的id遍历UI树，找到对应的操作节点
- 调用节点的相关方法进行更改
这就是Android当中的命令式UI，即UI的更新都需要手动刷新，UI与数据没有映射关系
命令式UI的缺点
- UI刷新工作比较繁重
随着应用UI的复杂化，需要刷新UI的时机变得很多，如获取网络数据刷新页面、下拉刷新、滑动Banner、点击选择等涉及到用户交互的地方
刷新UI的时机变多，同时给开发者带来手动刷新也变多了，该过程的繁琐不仅涉及到：JQuery主导前端、Objective-C主导ios端、还是Java主导Android端的开发时代，开发者有相当一部分工作都是在处理UI的各种刷新
- 容易出错
若项目中有一份数据，这份数据决定UI的呈现，开发者需要分开处理这两部分，数据变更后手动处理UI的刷新
一旦涉及到手动操作，便会提高出错的可能性，如果一个数据需要处理多个节点，很容易遗漏某个节点的更新；多种刷新操作针对同一个节点时，很容易造成冲突的异常状态
- 性能问题
当一个UI组包含多个组件并且有多种状态时，开发者在进行手动刷新时，一般将此UI组中的全部组件进行刷新，这样会牺牲掉一部分性能，造成性能浪费
原因在于此UI组的状态过多，如果每次都通过对比只做必要性的刷新，也会增加代码的复杂度，后期更加难以维护
声明式UI（Declarative UI）
什么是声明式UI
由于Android中命令式UI的诸多问题，Google在2021年7月正式发布Jetpack Compose 1.0.0，至此我们可以在Android开发中使用Jetpack Compose进行声明式UI开发
// 代码经过简化
var text = "text_old"
var image = R.drawable.image_old
Column {
Text(text = text)
Image(painter = painterResource(image), contentDescription = "ImageDescription")
}
text = "text_new"
image = R.drawable.image_new
代码中没有XML布局，当text或者image的变量值发生改变时，UI自动刷新。这便是Android中的声明式UI，即UI会随着数据的变化而自动更新，UI与数据有映射关系
| UI 是否自动刷新 | UI与数据是否有映射关系 | |
|---|---|---|
| 命令式UI | 否 | 否 |
| 声明式UI | 是 | 是 |
声明式UI的优点
- 没有UI刷新工作
在声明式UI中，开发者只需要关注数据与UI之间的映射关系即可，后续只用关注数据维护而不需要关注UI的刷新，极大减轻了UI的工作，这也是目前前端进入Vue和React时代完成编码比Android更快的原因之一
- 不易出错
UI刷新是由框架实现，开发者只需要关注刷新数据，框架的可靠性保证了数据与UI的一致性
- 性能提升
大部分声明式 UI 框架不会数据一变就全量刷新，提升了性能
声明式UI发展历程
- WPF XAML
- Qt Quick
- React
2013 年 Facebook 发布 React，React 是用于构建 UI 界面的 Web 开发框架，React 在将声明式 UI 带入 Web 的同时，把声明式 UI 的发展推向高潮。React 使用 JSX 来描述界面，通过 Virtual DOM 技术最大程度减少前端对 DOM 的操作，从而提升渲染效率。
- Vue
2014 年尤雨溪发布 Vue，Vue 是一套用于构建 UI 界面的渐进式 Web 框架，允许采用简洁模板语法，来声明式的将数据渲染 DOM 的系统，数据和 DOM 绑定在一起，所有的元素都是响应式的。
- Flutter
2018 年 Google 发布 Flutter 1.0 版本，正式将声明式 UI 带入移动开发世界，Flutter 吸取了 React 的理念，把 UI 看作是状态函数，采用 Skia 作为渲染引擎。Skia 对平台的依赖只需要一个 GL Context，这使得 Flutter 具有强大的跨平台属性，能够运行在 Android、iOS、Windows、Linux、macOS，以及 Google 最新开发的操作系统 Fuchsia 上。
- SwiftUI
- Jetpack Compose
2021 年 Google 发布 Jetpack Compose 1.0.0，正式从 Android 上支持了声明式 UI 开发，表明了两大移动操作系统阵营全面拥抱声明式 UI。
- Compose Multiplatform