MutableState — สถานะที่สามารถสังเกตได้และกลไกการอัพเดตใน Compose

MutableState ใน Jetpack Compose คืออะไร

MutableState คืออินเทอร์เฟสจากแพ็กเกจ androidx.compose.runtime ที่ประกาศคุณสมบัติเดียว: override var value: T getter จะส่งคืนค่าปัจจุบัน, setter จะเขียนค่าใหม่และแจ้ง Compose Runtime ถึงการเปลี่ยนแปลง อินเทอร์เฟสนี้สืบทอดจาก State<T>, โดยที่ value สามารถอ่านได้อย่างเดียว สถาปัตยกรรมสองระดับนี้ช่วยให้สามารถแยกการเข้าถึงได้: ส่วนประกอบที่ต้องการอ่านค่าอย่างเดียวจะได้รับ State<T>, ในขณะที่ส่วนประกอบเจ้าของจะได้รับ MutableState<T>

การนำไปใช้งานโดยแนะนำของ MutableState คือคลาสภายใน SnapshotMutableStateImpl, ซึ่งใช้กลไก snapshot ในการติดตามการเปลี่ยนแปลง เมื่อเรียก setter ของ value, snapshot ปัจจุบันจะบันทึกการเขียนและทำเครื่องหมาย ObservedScope ที่ลงทะเบียนไว้ทั้งหมดว่าไม่ถูกต้อง ขอบเขตเหล่านี้ (โดยทั่วไปคือฟังก์ชัน Composable) จะถูกประกอบใหม่ในเฟรมถัดไป กระบวนการทั้งหมดเกิดขึ้นแบบซิงค์โครนัสและไม่มีการล็อคด้วยสถาปัตยกรรม Lock-free snapshot

State vs MutableState: State คืออินเทอร์เฟสสำหรับการอ่านอย่างเดียวที่ใช้สำหรับ API สาธารณะของส่วนประกอบ เมื่อคุณประกาศพารามิเตอร์ฟังก์ชัน Composable เป็น State<Int>, คุณรับประกันว่าส่วนประกอบสามารถอ่านได้แต่ไม่สามารถเปลี่ยนสถานะได้ MutableState ถูกใช้ภายในส่วนประกอบเจ้าของ การแยกแยะนี้เป็นหนึ่งในแนวปฏิบัติพื้นฐานของ Compose ที่ป้องกันการเปลี่ยนแปลงโดยไม่ได้รับอนุญาต

ลำดับชั้นของ State, MutableState และอินเทอร์เฟสที่สืบทอด

ลำดับชั้นของอินเทอร์เฟสสถานะใน Compose มีหลายระดับ อยู่โดดยอนุกรมคือ State<T> ที่มี value แบบอ่านอย่างเดียว ถัดลงไปคือ MutableState<T> ที่มี value แบบอ่าน-เขียน ถัดลงไปอีกเป็นเวอร์ชันประถมภูมิเฉพาะทาง: MutableIntState, MutableFloatState, MutableLongState, MutableBooleanState และอื่นๆ, ซึ่งหลีกเลี่ยงการห่อหิบ (บ็อกซิ่ง) ของประถมภูมิ

MutableDoubleState และ MutableLongState ไม่ทั่วไปแต่ก็มีอยู่ อินเทอร์เฟสคอลเล็กชัน: MutableListState — สำหรับติดตามการเปลี่ยนแปลงภายในรายการ, MutableStateMap — สำหรับแมพ แต่ละอินเทอร์เฟสเหล่านี้ได้รับการปรับปรุงสำหรับสถานการณ์เฉพาะและขยาย MutableState พื้นฐานด้วยวิธีการจัดการคอลเล็กชันเพิ่มเติม

SnapshotStateList และ SnapshotStateMap เป็นการนำไปใช้ของรายการและแมพที่สามารถเปลี่ยนแปลงได้ซึ่งเข้ากันได้กับ snapshot พวกมันสามารถติดตามไม่เพียงการแทนที่ค่า แต่รวมถึงการเปลี่ยนแปลงภายใน: การเพิ่มรายการในรายการ, การลบ, การแก้ไขรายการที่มีอยู่ สำหรับโครงสร้างเช่นนี้, mutableStateListOf() และ mutableStateMapOf() จะสร้างคอลเล็กชันที่สามารถสังเกตได้ตามลำดับ

SnapshotMutationPolicy: เมื่อไรที่จะเริ่มการประกอบใหม่

SnapshotMutationPolicy คืออินเทอร์เฟสที่กำหนดเมื่อไรที่การเปลี่ยนแปลงใน MutableState ถือว่ามีนัยสำคัณ mutableStateOf รับ policy เป็นอาร์กิวเมนต์ที่สอง การนำไปใช้มาตรฐาน: structuralEquality() (equals), referentialEquality() (===), neverEqualPolicy() (ถือว่าการเปลี่ยนแปลงทุกครั้งมีนัยสำคัณ) สามารถดำเนินการกำหนดนโยบายเองสำหรับตรรระกะอที่กำหนดเอง

structuralEquality() — พฤติกรรมเริ่มต้น Compose เปรียบเทียบค่าใหม่กับค่าเก่าโดยใช้ equals() หากผลลัพธ์เป็น true, จะไม่มีการประกอบใหม่ สะดวกสำหรับประถมภูมิและ data class, ซึ่งสองอินสแตนซ์ที่มีฟิลด์เดียวกันจะถือว่าเท่ากัน ปัญหา: หาก data class มี List, equals() จะทำการเปรียบเทียบแบบลึก, ซึ่งอาจมีค่าใช้จ่ายสำหรับรายการขนาดใหญ่

referentialEquality() — เปรียบเทียบการอ้างอิงโดยใช้ === การประกอบใหม่จะเกิดขึ้นเมื่อมีการกำหนดอ็อบเจกต์ที่แตกต่างกัน, แม้ว่าเนื้อหาจะเหมือนกัน ที่เหมาะสำหรับ data class ที่ไม่สามารถเปลี่ยนแปลงได้ โดยที่แต่ละอินสแตนซ์ใหม่รับประกันว่าเป็นการเปลี่ยนแปลง neverEqualPolicy() — ถือว่าการเปลี่ยนแปลงทุกครั้งมีนัยสำคัณโดยไม่ต้องเปรียบเทียบ มีประโยชน์เมื่อ setter ถูกเรียกไม่บ่อยและไม่จำเป็นต้องเสียเวลากับ equals

    // Policy comparison in practice
data class User(val name: String, val age: Int)

@Composable
fun UserProfile() {
    // structuralEquality: recomposition ONLY if data changed
    var user1 by remember {
        mutableStateOf(User("Alice", 30))
    }

    // referentialEquality: recomposition on ANY assignment
    var user2 by remember {
        mutableStateOf(User("Bob", 25),
            SnapshotMutationPolicy.referentialEquality())
    }

    // user1: copy() with same fields does NOT trigger recomposition
    // user2: even user2.copy() == user2 triggers recomposition (new ref)
}

State เบื้องต้น: MutableIntState, MutableFloatState, MutableLongState

MutableIntState และที่คล้ายกันเป็นอินเทอร์เฟสเฉพาะทางที่จัดเก็บประถมภูมิโดยไม่มีการห่อหิบ MutableState<Int> ทั่วไปจัดเก็บ Int เป็น Integer, ซึ่งสร้างอ็อบเจกต์บนฮีปทุกครั้งที่เขียน MutableIntState จัดเก็บ int (ประถมภูมิ), ซึ่งช่วยลดโอเวอร์เฮดของการห่อหิบได้อย่างสมบูรณ์ นี้มีความสำคัญเฉพาะสำหรับการอัพเดตความถี่สูง — ตัวนับ, ตำแหน่งการเลื่อนไผล, ค่าแอนิเมชั่น

mutableIntStateOf(), mutableFloatStateOf(), mutableLongStateOf() — ฟังก์ชันที่สร้าง MutableState แบบประถมภูมิ อินเทอร์เฟสเหล่านี้เรียกว่า MutableIntState, MutableFloatState, MutableLongState พวกมันขยาย MutableState<Int>, MutableState<Float> และ MutableState<Long> ตามลำดับ, และเพิ่มคุณสมบัติ intValue สำหรับการเข้าถึงประถมภูมิอย่างรวดเร็ว การนำไปใช้ภายในใช้ AtomicInteger สำหรับการอ่าน/เขียนที่ไม่มีการล็อค

การใช้งาน: ตัวนับ (Int), ตำแหน่งการเลื่อนไผล (Float offset), เวลาประทับ (Long) ในสถานการณ์ส่วนใหญ่ในชีวิตประจำวัน, ความแตกต่างด้านประสิทธิภาพไม่สามารถรับรู้ได้ แต่ใน LazyList ที่มีรายการพันรายการและแอนิเมชั่นเพื่อรับการเปลี่ยนแปลง, State แบบประถมภูมิจะให้การปรับปรุงที่เหน็ได้ชัดเจน Google แนะนำให้ใช้ State แบบประถมภูมิสำหรับสถานการณ์ทั่วไปแทนที่จะใช้ mutableStateOf ที่เป็นสากลสากล

@Composable
fun ScrollCounter() {
    // Bad: boxing on every update
    var badCount by remember { mutableStateOf(0) }

    // Good: no boxing, primitive storage
    var goodCount by remember { mutableIntStateOf(0) }

    // Usage is identical
    Button(onClick = { goodCount++ }) {
        Text("Count: $goodCount")
    }
}

ตัวอย่างการใช้งาน MutableState

ลองพิจารณาส่วนประกอบ TodoList, ซึ่งใช้ MutableState ในสองรูปแบบ: เป็นตัวแปรแยกต่างๆ สำหรับสถานะอินพุต และเป็น SnapshotStateList สำหรับรายการงานแบบไดนามิก ทั้งสองใช้การมอบหมายเพื่อความกระชับของโค้ด

data class TodoItem(val id: Int, val text: String, val isDone: Boolean = false)

@Composable
fun TodoScreen() {
    var inputText by remember { mutableStateOf("") }
    val items = remember { mutableStateListOf() }

    Column(modifier = Modifier.padding(16.dp)) {
        Row {
            TextField(
                value = inputText,
                onValueChange = { inputText = it }
            )
            Button(onClick = {
                if (inputText.isNotBlank()) {
                    items.add(TodoItem(items.size, inputText))
                    inputText = ""
                }
            }) { Text("Add") }
        }

        LazyColumn {
            items(items) { item ->
                Row(modifier = Modifier.fillMaxWidth().clickable {
                    val idx = items.indexOf(item)
                    items[idx] = item.copy(isDone = !item.isDone)
                }) {
                    Checkbox(checked = item.isDone, onCheckedChange = null)
                    Text(item.text)
                }
            }
        }
    }
}

mutableStateListOf สร้าง SnapshotStateList — รายการที่สามารถเปลี่ยนแปลงได้ซึ่งติดตามการเปลี่ยนแปลงของแต่ละรายการ เมื่อ items.add() และ items[n] = newValue ถูกเรียก, Compose จะเห็นการเปลี่ยนแปลงและประกอบใหม่เฉพาะส่วนของ LazyColumn ที่เปลี่ยนแปลง inputText เป็น MutableState<String> ทั่วไป การรวมกันของ MutableState สองประเภท (เดียวและคอลเล็กชัน) เป็นรูปแบบทั่วไปสำหรับหน้าจอที่มีฟอร์มและรายการ