頗析 Composition 中的 composable

Kimoji：以 Jetpack Compose 實作一款「心情日記」應用 [17]

Sep 20, 2022

此系列文章是以我的業餘專案： Kimoji 為範例。
這款以純 Jetpack Compose 撰寫的 side project，已經在 Google Play 上架。歡迎試玩！
📥 立馬下載 | | | 🎟️ 限免兌換碼

Composable 在 Composition 中的 instance 是由它的 call site 決定。Compose compiler 會將每個 call site 視為是相異的。從多個 call site 去呼叫 composable，會在 Composition 中建立多個 composable instance。

重要詞彙： call site 是指在 code 中呼叫 composable 的位置。而這會影響 composable 元件在 Composition 結構中的位置，進而影響 UI 樹狀結構。

如果在 recomposition 期間，composable 呼叫了一些和上一次 composition 不同的 composable，Compose 會辨識哪些 composable 上次有被呼叫過，並且對於在兩次 composition 中都有被呼叫的 composable，如果它們的 inputs 維持不變的情況下，Compose 會略過 recomposition。

來參考以下範例：

在上面的程式碼中，LoginScreen 會以根據條件呼叫 LoginError composable，並且一律呼叫 LoginInput composable。每個呼叫都有專屬的 call site 和來源位置，compiler 將會用來識別 caller identity。

當狀態發生改變且 recomposition 觸發時，`LoginScreen 在` Composition 中的示意圖。相同顏色則表示沒有被 recompose。

在第一次 composition 中， LoginInput是第一個被呼叫的函式，而在第二次 composition 中是第二的被呼叫的函式。雖然呼叫順序改變，但 LoginInput的 instance 在 recomposition 後仍會保留在 composition 中。此外，由於 recomposition 時，LoginInput 沒有改變任何參數，因此 Compose 會略過對 LoginInput 的呼叫。換句話說，也就是 recomposition 時，LoginInput不會重新執行一次。