Jetpack Compose學習(13)——Compose生命周期及副作用函數

原文: Jetpack Compose學習(13)——Compose生命周期及副作用函數-Stars-One的雜貨小窩此文建議需要瞭解kotlin的lambda表達式使用和協程基礎使用,不然可能會有些閱讀困難本篇算是參考他人文章,按照自己理解重新總結了下吧,偏理論生命周期 Composable ...

原文: Jetpack Compose學習(13)——Compose生命周期及副作用函數-Stars-One的雜貨小窩

此文建議需要瞭解kotlin的lambda表達式使用和協程基礎使用,不然可能會有些閱讀困難

本篇算是參考他人文章,按照自己理解重新總結了下吧,偏理論

生命周期

Composable 組件都是函數，Composable 函數執行會得到一棵視圖樹，每一個 Composable 組件對應視圖樹上的一個節點。

Composable 的生命周期定義如下：

onActive(添加到視圖樹) Composable 首次被執行，即在視圖樹上創建對應的節點。
onUpdate(重組) Composable 跟隨重組不斷執行，更新視圖樹上對應的節點。
onDispose(從視圖樹移除) Composable 不再被執行，對應節點從視圖樹上移除

對於 Compose 編寫 UI 來說，頁面的變化，是依靠狀態的變化，Composable 進行重組，渲染出不同的頁面。
當頁面可見時，對應的節點被添加到視圖樹, 當頁面不可見時，對應的節點從視圖樹移除

副作用函數

Composable 重組過程中可能反覆執行,並且中間環節有可能被打斷,導致與我們預期次數不符

比如說:

在Composable我們有個彈出toast操作,本質上我們是希望它執行一次,但發生重組後,可能會有多次重覆執行

類似這樣，在 Composable 執行過程中，凡是會影響外界的操作，都屬於副作用。

這個時候,如何保證我們想要的預期執行一次?這個時候就得使用副作用函數來解決此問題,即是下麵的內容

SideEffect

SideEffect 在每次成功重組的時候都會執行(僅在重組成功才會執行)

Composable 在重組過程中會反覆執行，但是重組不一定每次都會成功，有的可能會被中斷，中途失敗。

特點:

重組成功才會執行。
有可能會執行多次。

所以，SideEffect函數不能用來執行耗時操作，或者只要求執行一次的操作。

@Composable
fun HomePage() {
	SideEffect{
		//一些操作
	}	
}

DisposableEffect(預處理)

DisposableEffect 可以感知 Composable 的 onActive 和 onDispose, 允許使用該函數完成一些預處理和收尾工作。

DisposableEffect(vararg keys: Any?) {
	    // register(callback)
	    onDispose {
	        // unregister(callback)
	    }
	}

這裡首先參數 keys 表示，keys可以是任意對象,當 keys 變化時， DisposableEffect 會重新執行，如果在整個生命周期內，只想執行一次，則可以傳入 Unit

而 onDispose 代碼塊則會在 Composable 進入 onDispose生命周期時執行。

@Composable
fun HomePage() {
	DisposableEffect(Unit) {
	    // register(callback)
	    onDispose {
	        // unregister(callback)
	    }
	}
}

LaunchedEffect(比較常用)

LaunchedEffect 用於在 Composable 中啟動協程，當 Composable 進入 onAtive 時，LaunchedEffect 會自動啟動協程，執行 block 中的代碼。

當 Composable 進入 onDispose 時，協程會自動取消。

同樣的,也是有個key參數,變化就會重新執行

@Composable
fun HomePage() {
	//這裡我傳了Unit(也是個對象)
	LaunchedEffect(Unit) {
	    // do Something async
	}
}

rememberCoroutineScope

LaunchedEffect只能在@Composable函數作用域使用

如果想要在onclick等事件進行協程等操作,可以使用此rememberCoroutineScope函數來獲取到協程的scope,如下代碼

@Composable
fun HomePage() {
	val scope = rememberCoroutineScope()
	Button(onClick = {
		scope.launch{
			//相關耗時操作
		}
	}){
		Text("點擊操作")
	}
}

rememberUpdatedState

在不中斷協程的情況下，保證始終能夠獲取到最新的值

總結使用情景:一般情況下,如果我們的@Composable組件需要接受外部數值,且外部數值在父級別@Composable會有數值的更新操作,且我們還使用了副作用函數(不管是在子還是父)

那麼我們這個@Composable組件最好使用rememberUpdatedState來獲取最新數值

如下麵的FinalChoose組件,是接受一個外部數值,但這個數值又有可能在外部被更改(ChooseHero里的sheshou變數),而且FinalChoose中有副作用函數

@Composable
fun ChooseHero() {
    var sheshou by remember {
        mutableStateOf("狄仁傑")
    }

    Column {
        Text(text = "預選英雄： $sheshou")
		//點擊按鈕會修改 sheshou 這個變數
        Button(onClick = {
            sheshou = "馬可波羅"
        }) {
            Text(text = "改選：馬可波羅")
        }
		//這裡傳入了一個sheshou變數(但裡面有個倒計時)
        FinalChoose(sheshou)
    }
}


@Composable
fun FinalChoose(hero: String) {
    var tips by remember {
        mutableStateOf("游戲倒計時：10s")
    }

	//如果不用這個,此組件的currentHero只會一致等於hero參數
    val currentHero by rememberUpdatedState(newValue = hero)
	// val currentHero = hero

    LaunchedEffect(key1 = Unit) {
		repeat(9) {
            "游戲倒計時：${10-it}s"
            delay(1000)
        }
        tips = "最終選擇的英雄是：$currentHero"
    }
    Text(text = tips)
}

更詳細說明可以參考此文Compose：長期副作用 + 智能重組 = 若智？聊聊rememberUpdateState - 掘金

derivedStateOf

將其他state派生為新的state,使用此函數可確保僅當計算中使用的狀態之一發生變化時才會進行計算,如下代碼:

@Composable
fun HomePage() {

    val time by remember { mutableIntStateOf(10) }

	//只要當time變更了,這個newTip數據才會變更
    val newTip by remember { derivedStateOf{"剩餘時間:$time"} }
	
}

produceState

定義了一個狀態 State, 然後啟動了一個協程，在協程中去更新 State 的值。參數 key 發生變化時，協程會取消，然後重新啟動，生成新的 State。

將任意數據源轉為state對象(實際我們的操作就是在協程作用域里進行的),如下麵代碼

//這裡弄的簡單些,返回個字元串
val newData by produceState("無數據"){
	//當前已經在協程作用域里,可以按照需求啟動新協程
	this.launch {
		
	}
	
	//非同步等操作
	
	//模擬請求api數據
	val result = "數據: {code:200}"
	delay(500)
	//設置數據
	value = result
	
	awaitDispose {
		//一些收尾工作,釋放資源之類會取消觀察
	}
}

或者整成個方法來進行調用,如API請求之類:

@Composable
fun GetApi(url: String): Recomposer.State<Result<Data>> {
	//這裡produceState傳的url就相當於是key
    return produceState(initialValue = "無數據", url) {
		//模擬請求api數據
		val result = "數據: {code:200}"
		delay(500)
		//設置數據
		value = result
		
        awaitDispose {
        	//一些收尾工作
        }
    }
}

進階理解 - 穩定和不穩定

當實體類里存在var關鍵字的成員變數,編譯器寧願犧牲性能進行一次重組,也不會展示錯的UI

用 var 聲明 Hero 類的屬性時，Hero 類被 Compose 編譯器認為是不穩定類型:

即有可能，我們傳入的參數引用沒有變化，但是屬性被修改過了，而 UI 又確實需要顯示修改後的最新值。
而當用 val 聲明屬性了，Compose 編譯器認為該對象，只要對象引用不要變，那麼這個對象就不會發生變化，自然 UI 也就不會發生變化，所以就跳過了這次重組。

常用的基本數據類型以及函數類型(lambda)都可以稱得上是穩定類型，它們都不可變

反之，如果狀態是可變的，那麼比較 equals 結果將不再可信。在遇到不穩定類型時，Compose 的抉擇是寧願犧牲一些性能，也總好過顯示錯誤的 UI。

如下麵的例子:

//註意參數里有個var
data class Hero(var name: String,val age:Int=18)

val shangDan = Hero("呂布")

@Composable
fun StableTest() {
    var greeting by remember {
        mutableStateOf("hello, 魯班")
    }

    Column {
        
        Text(text = greeting)
        Button(onClick = {
            greeting = "hello, 魯班大師"
        }) {
            Text(text = "搞錯了，是魯班大師")
        }
		//這裡實際上,對象是沒有變的
        ShangDan(shangDan)
    }
}

@Composable
fun ShangDan(hero: Hero) {
	println("執行")
    Text(text = hero.name)
}

上面的shandan對象是固定的,但是測試,點擊button後,明明沒有更新shandan對象的數值,但發現ShangDan這個組件還是進行了重組操作!

這個就是因為Hero類中的name為var,被編譯器視為了不穩定,所以犧牲了性能,進行了重組(避免展示了錯誤的UI)

上面情景中使用var會導致性能會有些損耗,但我們又可能因為業務需求,不能將實體類的成員變數都定為val關鍵字,這個時候還有什麼辦法?

當然有,那就是使用@Stable註解,只要對象引用不變,則不會觸發重組,如下代碼:

@Stable
data class Hero(var name: String,val age:Int=18)

參考

提問之前，請先看提問須知點擊右側圖標發起提問

或者加入QQ群一起學習

TornadoFx學習交流群:1071184701