記事ディレクトリ
序文
この記事を読むには特定の作成基盤が必要です。そうでない場合は、Jetpack Compose の詳細な紹介に進んでください (リアルタイムで更新されます)
この記事では、Compose のderivedStateOf の基本概念を紹介します。公式サイトのチュートリアルの概要によると、何か間違っている場合はコメント欄でアドバイスしてください
1.派生StateOfとは何ですか?
**derivedStateOf の公式解釈は、1 つ以上の状態オブジェクトを他の状態に変換するために使用されます。状態が計算されるか、他の状態オブジェクトから導出される場合は、derivedStateOf を使用します。この関数を使用すると、計算に使用される状態の 1 つが変化した場合にのみ計算が行われるようになります。**それは少し口が重いですが、初めて見たときは騙されたことを認めます
2、例
Jetpack Compose でよくあるパフォーマンスの問題を最適化するビデオのderivedStateOf の例を私なりの理解に基づいて整理したものです。この場合、リストを表示する必要があります。リストが下にスライドすると、次の例が分かりやすくなります。ボタンを表示する
package com.zyf.electronicwoodfish.view
/**
* @author zengyifeng
* @date createDate:2023-07-22
* @brief description derivedStateOf状态的使用
*/
@Preview(showBackground = true ,showSystemUi = true)
@Composable
fun DerivedStateOfView() {
val items = (1..100).toList()
val lazyState = rememberLazyListState()
LazyColumn(modifier = Modifier.padding(10.cdp), state = lazyState){
items(items.size) {
Text("$items[it]")
}
}
val showButton = lazyState.firstVisibleItemIndex > 0
AnimatedVisibility(visible = showButton){
ScrollToTopButton()
}
}
上記のコードは、0 ～ 100 のリストを実装し、showButton 変数を作成します。lazyState.firstVisibleItemIndex > 0 は、リストの最初に表示されるインデックスが 0 より大きい場合にボタンを表示することを意味しますが、問題が発生します。実際には、lazyState.firstVisibleItemIndex > 0 または =0 の場合にボタンが表示されない場合のみを考慮しますが、リストがスライドするたびに LazyState が変化し、そのため showButton 変数が常に変化することがわかっています。これは、ページがフレームごとに再構築されていることにつながります。
誰かが「remember を追加したらどうですか?」と言おうとしています。あなたは本当に賢いですね、もちろん追加する必要がありますが、ただ覚えているだけではなく、覚えているだけを追加しても、lazyState が変更されたときに再編成され、変更はありません。アピール部分のコードを修正しました
//val showButton = lazyState.firstVisibleItemIndex > 0
val showButton by remember{
derivedStateOf{
lazyState.firstVisibleItemIndex > 0
}
}
このようにして、コンポーザブルアイテムは、lazyState.firstVisibleItemIndex > 0が実際に変更されたとき、つまりlazyState.firstVisibleItemIndex > 0またはlazyState.firstVisibleItemIndex = 0のときにのみ再編成されます。
要約する
そこで、derivedStateOf は remenber とともに使用される関数で、複数の状態を 1 つのブール状態に結合して、構成可能なアイテムの再編成を制御し、パフォーマンスの最適化の役割を果たします。