Kotlin Multiplatform Academy · पाठ

Shared UI में State और Recomposition

अपने साझा StateFlow से Compose संचालित करें

पाठ 3, कुल 4 में से13 चरण

Shared UI में State और Recomposition, CoddyKit पर Kotlin Multiplatform Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Kotlin Multiplatform Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Kotlin Multiplatform Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

यूआई स्थिति का फलन है

Compose में आपकी स्क्रीन स्थिति से बनती है। स्थिति बदलने पर Compose केवल उन हिस्सों को फिर से बनाता है जो उस पर निर्भर हैं। आपको दृश्यों को हाथ से बदलने की आवश्यकता नहीं होती।

पुनर्संयोजन की व्याख्या

उस स्वचालित दोबारा निर्माण को पुनर्संयोजन कहते हैं। Compose प्रभावित कंपोज़ेबल को नए मानों के साथ फिर चलाता है और आपके लिए स्क्रीन अपडेट करता है।

स्थानीय स्थिति याद रखें

किसी कंपोज़ेबल की अपनी स्थिति के लिए remember को mutableStateOf के साथ उपयोग करें, ताकि मान पुनर्संयोजन के बाद भी बना रहे और हर फ़्रेम पर फिर से सेट न हो।

val count = remember { mutableStateOf(0) }

स्थिति पढ़ें और लिखें

मान को सामान्य चर की तरह पढ़ने और लिखने के लिए उसे by में लपेटें। उसे पढ़ने पर कंपोज़ेबल उसकी सदस्यता लेता है, इसलिए लिखने पर स्क्रीन फिर बनती है।

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: " + count)
}

स्थिति को ऊपर उठाएँ

स्थिति को सबसे निचले साझा मूल तक ले जाएँ और मानों को नीचे भेजें। यह स्थिति-उत्थापन बाल कंपोज़ेबल को स्थिति-रहित, दोबारा उपयोग योग्य और जाँचने में आसान रखता है।

@Composable
fun Counter(value: Int, onInc: () -> Unit) {
    Button(onClick = onInc) { Text("" + value) }
}

स्थिति साझा कोड में रहती है

आपका वास्तविक सत्य-स्रोत साझा परत है। एक क्रॉस-प्लेटफ़ॉर्म StateFlow स्क्रीन की स्थिति को एक ही स्थान पर रखता है, किसी भी प्लेटफ़ॉर्म के यूआई ढाँचे से दूर।

val uiState: StateFlow<ScreenState> = _state

Compose में StateFlow एकत्र करें

उस प्रवाह को collectAsState के ज़रिए Compose से जोड़ें। कंपोज़ेबल उसे देखता है और साझा स्थिति का नया मान आने पर फिर से संयोजित होता है।

val state by viewModel.uiState.collectAsState()
Text(state.title)

सत्य का एकमात्र स्रोत

क्योंकि स्थिति साझा कोड से Compose तक प्रवाहित होती है, Android और iOS एक ही सत्य-स्रोत से बिल्कुल समान स्क्रीन बनाते हैं। कोई अंतर नहीं रहता।

कंपोज़ेबल में साइड इफ़ेक्ट से बचें

कंपोज़ेबल कई बार चल सकता है, इसलिए उसके बॉडी में सीधे नेटवर्क कॉल जैसा काम कभी न करें। इसे केवल एक शुद्ध विवरण रखें और इफ़ेक्ट्स को कहीं और संभालें।

साइड वर्क के लिए LaunchedEffect

जब आपको यूआई से जुड़े कॉरूटीन को शुरू करना हो, तो LaunchedEffect का उपयोग करें। यह हर कुंजी के लिए एक बार चलता है और कंपोज़ेबल के हटते ही अपने-आप रद्द हो जाता है।

LaunchedEffect(Unit) {
    viewModel.load()
}

व्युत्पन्न और स्थिर स्थिति

मौजूदा स्थिति से मान निकालने के लिए derivedStateOf का उपयोग करें, ताकि वे केवल अपने इनपुट बदलने पर ही दोबारा गणना हों और री-कंपोज़िशन हल्का रहे।

त्वरित जाँच

री-कंपोज़िशन के दौरान किसी मान को कौन बनाए रखता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: स्थिति यूआई को चलाती है

आपने सीखा कि स्थिति री-कंपोज़िशन को चलाती है, उसे याद रखने और ऊपर उठाने का तरीका क्या है, और साझा StateFlow Compose को डेटा कैसे देता है, ताकि दोनों ऐप एक ही सत्य प्रस्तुत करें। 🔁

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Shared UI में State और Recomposition” पाठ निःशुल्क है?

हाँ—“Shared UI में State और Recomposition” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Kotlin Multiplatform Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Kotlin Multiplatform Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Shared UI में State और Recomposition” में मैं क्या सीखूँगा?

अपने साझा StateFlow से Compose संचालित करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Kotlin Multiplatform Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Kotlin Multiplatform Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Kotlin Multiplatform Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Shared UI में State और Recomposition” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Kotlin Multiplatform Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Kotlin Multiplatform Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Kotlin Multiplatform Academy पर वापस जाएँ