mutableStateOf: देखने योग्य स्थिति बनाना और Compose प्रतिक्रियाशीलता

Jetpack Compose में mutableStateOf क्या है

mutableStateOf compose.runtime पैकेज का एक फ़ंक्शन है जो एक MutableState<T> ऑब्जेक्ट बनाता है जो मान संग्रहीत करता है और Compose Runtime को बदलावों के बारे में सूचित कर सकता है। सिग्नेचर: fun <T> mutableStateOf(value: T, policy: SnapshotMutationPolicy<T> = structuralEquality()): MutableState<T>. पैरामीटर policy यह निर्धारित करता है कि बदलाव कब महत्वपूर्ण माना जाए — संरचनात्मक समानता पर, संदर्भ समानता पर, या कभी नहीं।

MutableState एक इंटरफ़ेस है जिसमें एक एकल गुण value है: पढ़ने के लिए गेट्टर और लिखने के लिए सेट्टर। जब सेट्टर कॉल किया जाता है, Compose Runtime बदलाव को एक snapshot में रिकॉर्ड करता है और इस State वेरिएबल को पढ़ने वाले सभी Composable फ़ंक्शन को पुनर्संरचना की आवश्यकता के रूप में चिह्नित करता है। यह प्रक्रिया एक ही snapshot चक्र के भीतर समकालिक रूप से होती है, जो कैस्केडिंग बदलावों के दौरान मध्यवर्ती स्थितियों को समाप्त करती है।

पैरामीटर policy — mutableStateOf का दूसरा तर्क, तुलना व्यवहार को परिभाषित करता है। structuralEquality() equals() की जाँच करता है — यह डिफ़ॉल्ट व्यवहार है। referentialEquality() === (संदर्भ समानता) की जाँच करता है। neverEqual() हर असाइनमेंट को बदलाव मानता है। policy का चुनाव प्रभावित करता है कि समान मान असाइन करने पर पुनर्संरचना शुरू होगी या नहीं।

mutableStateOf घोषित करने का सिंटैक्स और तरीके

देखने योग्य स्थिति घोषित करने का सबसे सरल तरीका mutableStateOf का remember के साथ उपयोग करना है। remember के बिना, प्रत्येक पुनर्संरचना एक नया State बनाती, और सभी पिछले बदलाव खो जाते। remember सुनिश्चित करता है कि वही MutableState पुनर्संरचनाओं की एक श्रृंखला में बना रहे जब तक Composable फ़ंक्शन संरचना में बना रहता है।

@Composable
fun Counter() {
    // बिना प्रतिनिधिमंडल के: .value के माध्यम से पढ़ना/लिखना
    val count = remember { mutableStateOf(0) }
    Button(onClick = { count.value++ }) {
        Text("Count: ${count.value}")
    }
}

@Composable
fun CounterDelegated() {
    // प्रतिनिधिमंडल के साथ: var + by = Property Delegation
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Count: $count")
    }
}

दोनों दृष्टिकोणों के बीच का अंतर वाक्यगत है। Property Delegation (by) Kotlin परंपरा का उपयोग करता है: कंपाइलर पढ़ने और लिखने के लिए getValue() और setValue() कॉल उत्पन्न करता है। यह count.value तक सीधे पहुँचने के बराबर है लेकिन एक सामान्य चर के साथ काम करने जैसा दिखता है। दोनों दृष्टिकोण कार्यात्मक रूप से समान हैं: Compose संकेतन की परवाह किए बिना गेट्टर में पढ़ने और सेट्टर में लिखने को ट्रैक करता है।

प्रतिनिधित गुण और var

Kotlin प्रतिनिधित गुण तंत्र Compose की विशेषता नहीं बल्कि भाषा की एक अंतर्निहित क्षमता है। कोई भी वर्ग getValue(thisRef, property) और setValue(thisRef, property, value) ऑपरेटरों को लागू कर सकता है, जिसके बाद इसके उदाहरण का उपयोग by कीवर्ड के साथ किया जा सकता है। MutableState बिल्कुल इसी तरह काम करता है: getValue वर्तमान मान लौटाता है, और setValue एक नया मान असाइन करता है।

एक महत्वपूर्ण अंतर: val बनाम var। mutableStateOf को val और var दोनों को असाइन किया जा सकता है। val (val count = mutableStateOf(0)) के साथ, MutableState ऑब्जेक्ट स्वयं अपरिवर्तनीय है, लेकिन इसका value गुण बदला जा सकता है। var (var count by mutableStateOf(0)) के साथ, प्रतिनिधिमंडल एक आदिम के साथ काम करने का भ्रम पैदा करता है, लेकिन सेट्टर वास्तव में MutableState पर setValue कॉल करता है। val और var के बीच चुनाव .value तक स्पष्ट और अंतर्निहित पहुँच के बीच चुनाव है।

State प्रतिनिधिमंडल वाक्यगत चीनी है जो कोड को सरल बनाता है लेकिन यांत्रिकी नहीं बदलता। Kotlin कंपाइलर var x by mutableStateOf(0) को getter/setter में अनुवादित करता है जो mutableStateOf.getValue() और mutableStateOf.setValue() कॉल करते हैं। उत्पन्न बाइटकोड में, by के साथ val और var के बीच कोई अंतर नहीं है — दोनों एक ही MutableState कंटेनर के माध्यम से काम करते हैं।

    // Compose State के लिए कस्टम प्रतिनिधि
class ValidatedState<T>(initialValue: T) {
    private val state = mutableStateOf(initialValue)

    operator fun getValue(thisRef: Any?, property: KProperty<*>) = state.value

    operator fun setValue(thisRef: Any?, property: KProperty<*>, value: T) {
        if (value != state.value) {
            state.value = value
        }
    }
}

@Composable
fun Test() {
    var text by remember { ValidatedState("") }
}

Snapshot प्रणाली: mutableStateOf आंतरिक रूप से कैसे काम करता है

Snapshot Compose Runtime का एक तंत्र है जो समानांतर बदलावों के दौरान State पढ़ने की संगति सुनिश्चित करता है। जब एक Composable फ़ंक्शन mutableStateOf पढ़ता है, snapshot वर्तमान मान रिकॉर्ड करता है। यदि संरचना के दौरान कोई अन्य बदलाव उसी State में लिखता है, snapshot लेखन देखता है लेकिन असंगत डेटा पढ़ने की अनुमति नहीं देता — पढ़ना हमेशा snapshot की शुरुआत में मान्य मान लौटाता है।

जब सेट्टर mutableStateOf.value = newValue कॉल किया जाता है, Compose Runtime तुरंत पुनर्संरचना शुरू नहीं करता। इसके बजाय, बदलाव वर्तमान snapshot में पंजीकृत होता है। जब snapshot लागू होता है (फ़्रेम सीमा पर), Compose बदले हुए States की सूची के माध्यम से जाता है और पढ़ने वाले घटकों को Invalid के रूप में चिह्नित करता है। केवल अगले फ़्रेम में पुनर्संरचना शुरू होती है। यह गारंटी देता है कि कैस्केडिंग बदलावों के दौरान UI दर्जनों बार पुन: चित्रित नहीं होता।

वैश्विक और स्थानीय snapshots: डिफ़ॉल्ट रूप से, mutableStateOf वैश्विक snapshot में काम करता है, जो स्वचालित रूप से लागू होता है। आप Snapshot.takeSnapshot() के माध्यम से साइड इफ़ेक्ट के बिना पृथक पढ़ने के लिए एक स्थानीय snapshot बना सकते हैं। इसका उपयोग Modifier के अंदर किया जाता है जब आपको बदलावों की सदस्यता लिए बिना State पढ़ने की आवश्यकता होती है। यह दृष्टिकोण प्रदर्शन को अनुकूलित करता है और अप्रत्याशित पुनर्संरचनाओं को रोकता है।

mutableStateOf के उपयोग के उदाहरण

एक वास्तविक परिदृश्य पर विचार करें — तीन फ़ील्ड वाला एक लॉगिन फ़ॉर्म: ईमेल, पासवर्ड और लोडिंग स्थिति। तीनों फ़ील्ड mutableStateOf का उपयोग करते हैं, लेकिन अलग-अलग policy और अलग-अलग नेस्टिंग स्तरों के साथ। email प्रतिनिधिमंडल का उपयोग करता है, password सीधी पहुँच का उपयोग करता है।

data class LoginState(
    val email: String = "",
    val password: String = "",
    val isLoading: Boolean = false,
    val error: String? = null
)

@Composable
fun LoginForm(onLogin: (String, String) -> Unit) {
    // फ़ॉर्म के लिए एकल State, policy = referentialEquality
    var formState by remember {
        mutableStateOf(LoginState(), SnapshotMutationPolicy.referentialEquality())
    }

    val isValid = remember(formState) {
        formState.email.contains("@") && formState.password.length() >= 6
    }

    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = formState.email,
            onValueChange = { formState = formState.copy(email = it) },
            label = { Text("ईमेल") }
        )
        OutlinedTextField(
            value = formState.password,
            onValueChange = { formState = formState.copy(password = it) },
            label = { Text("पासवर्ड") },
            visualTransformation = PasswordVisualTransformation()
        )
        Button(
            onClick = { onLogin(formState.email, formState.password) },
            enabled = isValid
        ) {
            Text("लॉगिन")
        }
    }
}

इस उदाहरण में, mutableStateOf का उपयोग एक कस्टम डेटा क्लास LoginState और policy referentialEquality के साथ किया गया है। इसका मतलब है कि पुनर्संरचना केवल तभी शुरू होगी जब copy() के माध्यम से एक नया LoginState इंस्टेंस असाइन किया जाए। isValid formState के आधार पर गणना की जाती है और केवल तभी पुनर्गणना होती है जब यह बदलता है। यह दृष्टिकोण पुनर्संरचनाओं पर स्पष्ट नियंत्रण प्रदान करता है: प्रत्येक फ़ॉर्म फ़ील्ड केवल एक नई प्रतिलिपि बनाकर बदलता है।