目前工作上開發的 Android 都是採用 Java + XML Layout 來開發，即使是 Side Project 也多是採用 Kotlin + MVVM + XML Layout，觀望 Jetpack Compose 一段時間了，由於習慣了舊有的 UI 架構，對於宣告式的 UI 架構學習曲線有一點高。

會記錄一下是因為 Jetpack Compose 好像改了很多版，網路上大多查到的 API 在現在的版本不是改名了，就是找不到，而且採用 Material3 開發時，發現官方的文件也是寫得不清不楚。

Declarative UI — 聲明式UI

上圖式命令式 UI 收到新的狀態時，需要執行的流程。

而 Compose 將狀態轉變為 UI，在生成 UI 之後就無法改變，所以當有新的狀態的改變時候，Compose 是直接將整個 UI 重新產生，但官方聲稱這個過程是很智慧化的，會跳過沒有改變的 UI 來提升效率，整體來說程式碼只需要描述介面外觀，不用告訴系統該如何實做。

What is @Composable

在過往使用 Layout.xml 時，我們定義一個元件或是介面，都會產生一個 xml 來定義版面或使用 include 來引入另一個 xml 來排列，在 Compose 中會使用 @Composable 來標記 function 以表示這是一個 Compose 元件，這個函數可有參數但不帶回傳值，用意是產生出介面，從而實現 UI 重用。

@Composable
fun MessageList(messages: List<String>) {
    Column {
        if (messages.size == 0) {
            Text(text = "No messages")
        } else {
            messages.forEach { message ->
                Text(text = message)
            }
        }
    }
}

以上是一個簡單的 Composable 元件，可以傳入一個字串集合來顯示所有的字串。這樣之所以可以做到資料狀態改變時 UI 重新繪製是因為底層的機制使用了與 MVVM 中一樣的觀察者機制。

val viewModel: ConversationViewModel = viewModel()
val messages by viewModel.messages.observeAsState()
MessageList(messages)

它利用了觀察者模式來監看資料的狀態，當資料發生變化時，UI 就會被呼叫重新繪製，Compose 稱之為「重組」。