مدیریت وضعیت (State Management) توی Jetpack Compose خیلی مهمه. یکی از روش‌های رایج برای ساخت و مدیریت وضعیت، استفاده از mutablestate.of هست.

حالا این روش رو میشه به سه شکل مختلف استفاده کرد:

• استفاده از یک آبجکت ساده برای وضعیت
• استفاده از کلمه کلیدی by (Delegates)
• استفاده از Destructuring (ساختار شکنی)

توی این مقاله، با مثال‌های ساده هر کدوم از این روش‌ها رو بررسی می‌کنیم و می‌بینیم کجاها کاربرد دارن.

mutableStateOf() چیه؟ : تعریف

mutablestate.Of یه هولدر (نگه‌دارنده) وضعیت توی Jetpack Compose هست که وقتی مقدارش تغییر می‌کنه، به UI اطلاع می‌ده تا دوباره رسم بشه.

مثال:

val counter = mutableStateOf(0)

اینجا counter.value مقدار وضعیت رو نگه می‌داره. هر وقت مقدارش عوض بشه، UI به طور خودکار دوباره رندر می‌شه.

حالا بریم سراغ سه روش استفاده از mutableStateOf():

سه روش استفاده از mutableStateOf():

۱. استفاده از یک آبجکت ساده (mutableStateOf())

این ساده‌ترین روشه که با استفاده از mutablestate.Of() یه وضعیت قابل تغییر می‌سازیم و از خاصیت value برای دسترسی بهش استفاده می‌کنیم.

مثال: اپلیکیشن شمارنده

@Composable
fun CounterScreen() {
    val counter = remember { mutableStateOf(0) }  // ساخت وضعیت قابل تغییر

    Column {
        Text(text = "Count: ${counter.value}", fontSize = 24.sp)
        Button(onClick = { counter.value++ }) {
            Text("Increase")
        }
    }
}

چطوری کار می‌کنه؟

• mutableState.Of(0) یه آبجکت وضعیت می‌سازه که مقدار اولیه‌اش 0 هست.
• برای دسترسی به وضعیت از counter.value استفاده می‌کنیم.
• هر وقت counter.value تغییر کنه، UI به طور خودکار دوباره رندر می‌شه.

چه موقع استفاده کنیم؟

وقتی می‌خوایم کنترل مستقیم روی آبجکت وضعیت داشته باشیم. این روش زمانی مفیده که بخوایم وضعیت رو به صورت پارامتر پاس بدیم (البته این کار خیلی توصیه نمی‌شه).

۲. استفاده از کلمه کلیدی by (Property Delegation)

یه راه تمیزتر و خلاصه‌تر برای استفاده از mutablestate.Of استفاده از by هست.

مثال: شمارنده با استفاده از Delegation

@Composable
fun CounterScreen() {
    var counter by remember { mutableStateOf(0) }  // استفاده از delegation

    Column {
        Text(text = "Count: $counter", fontSize = 24.sp)
        Button(onClick = { counter++ }) {
            Text("Increase")
        }
    }
}

چطوری کار می‌کنه؟

• کلمه کلیدی by نیاز به استفاده از .value رو حذف می‌کنه.
• var counter by mutableState.Of(0) معادل اینه:

val counter = mutableStateOf(0)
var counterValue: Int
    get() = counter.value
    set(value) { counter.value = value }

• این روش کد رو کوتاه‌تر و خواناتر می‌کنه.

چه موقع استفاده کنیم؟

وقتی می‌خوایم کد تمیزتر باشه و نخوایم از .value استفاده کنیم. ایده‌آل برای وضعیت‌های محلی در کامپوزبل‌ها.

۳. استفاده از Destructuring (ساختار شکنی)

با Destructuring می‌تونیم مقدار و تابع تنظیم‌کننده (Setter) رو از mutablestate.Of جدا کنیم.

مثال: شمارنده با استفاده از Destructuring

@Composable
fun CounterScreen() {
    val (counter, setCounter) = remember { mutablestateOf(0) }  // استفاده از ساختار شکنی

    Column {
        Text(text = "Count: $counter", fontSize = 24.sp)
        Button(onClick = { setCounter(counter + 1) }) {
            Text("Increase")
        }
    }
}

چطوری کار می‌کنه؟

val (counter, setCounter) = mutablestateOf(0)

• counter مقدار فعلی رو نگه می‌داره.
• setCounter وضعیت رو آپدیت می‌کنه (مثلاً setCounter(counter + 1)).

این روش از useState() در React الهام گرفته شده.

چه موقع استفاده کنیم؟

وقتی یه رویکرد فانکشنال (مثل برنامه‌نویسی تابعی) برای مدیریت وضعیت رو ترجیح می‌دیم.

نکات مهم برای مدیریت وضعیت در Jetpack Compose

از remember برای حفظ وضعیت در رندرهای مجدد استفاده کن.
از rememberSaveable برای حفظ وضعیت در تغییرات پیکربندی مثل چرخش صفحه استفاده کن.
وقتی وضعیت باید بین صفحه‌ها یا کامپوزبل‌ها به اشتراک گذاشته بشه، از ViewModel استفاده کن.
برای کدنویسی تمیزتر از by استفاده کن.

نتیجه‌گیری

Jetpack Compose چندین روش برای ساخت آبجکت‌های mutablestateOf() ارائه می‌ده که هر کدوم کاربرد و مزایای خاص خودشون رو دارن. با درک این سه روش می‌تونی کدهای تمیزتر، بهینه‌تر و مقیاس‌پذیرتری بنویسی.

خب دوستان، اینم از این مقاله. امیدوارم براتون مفید بوده باشه و چیزای جدیدی یاد گرفته باشید.