Medium 好讀版

此系列文章是以我的業餘專案： Kimoji 作為範例。
這款以純 Jetpack Compose 撰寫的 side project，已經在 Google Play 上架。 歡迎試玩！

立馬下載	索取兌換碼

Composable function 能以任何順序執行

光看 composable function 的程式碼，我們可能會認為程式碼是按照順序執行，但實際情況不一定如此。如果 composable function 包含對其他 composable functions 的呼叫，那些函式可能會以任何順序執行。Compose 可選擇認定部分 UI 元件的優先順序高於其他元件，並優先繪製這些元件。

舉例來說，假設我們有類似下方的程式碼，用於在 navigation 選單中繪製三個螢幕畫面：

@Composable
fun BottomNav() {
    KimojiNavigation {
        DiaryScreen()
        AddScreen()
        SettingsScreen()
    }
}

對 DiaryScreen、AddScreen 和 SettingsScreen 的呼叫能以任何順序執行。這表示我們將受到一些限制，例如無法讓 DiaryScreen() 先設定某些全域變數 (side-effect)，然後讓 AddScreen() 運用該變更。反之，每個函式都必須保持獨立。

Composable function 可能會頻繁被執行

在某些情況下，composable function 可能會於 UI 動畫中的每個 frame 都執行一次。如果函式執行耗時的操作 (例如讀取儲存裝置的內容)，可能會造成 UI 卡頓。

舉例來說，如果我們的 UI 元件嘗試讀取裝置設定，每秒可能會讀取這些設定數百次，進而對 app 效能造成嚴重影響。

如果我們的 composable function 需要資料，應定義用於接收資料的參數。我們可以將耗時的工作移至 composition 外的其他 thread，再使用 mutableStateOf 或 Flow 將資料傳遞給 Compose。

此系列文章是以我的業餘專案：Kimoji 為範例。

Kimoji 是一款心情日記 App，讓你用可愛的 emoji 來撰寫你的心情日記。現在就來試試這款設計精美的微日記吧！

立馬下載	索取兌換碼

Reference: https://developer.android.com/jetpack/compose/mental-model