‏Stateful و Stateless در Jetpack Compose

درJetpack Compose، کامپوننتهای Stateful و Stateless به دو دسته کلی تقسیم میشوند:

۱. کامپوننت های Stateless

یک کامپوننت Stateless هیچ وضعیت داخلی (State) را مدیریت نمیکند. خروجی این کامپوننت فقط به ورودیهایی که دریافت میکند وابسته است. این نوع کامپوننتها به عنوان "کامپوننتهای گنگ" (Dumb Components) شناخته میشوند، زیرا منطق خاصی ندارند و فقط داده هایی که دریافت میکنند را نمایش میدهند.

به بیان دیگر یک کامپوننت Stateless مانند یک کتاب است. هر بار که آن را باز میکنید، همان محتوا را نمایش میدهد، مگر اینکه به صورت دستی چیزی را در داخل آن تغییر دهید.

در Jetpack Compose، یک کامپوننت Stateless هیچ تغییری را به خاطر نمیسپارد. هر بار که فراخوانی میشود، فقط آنچه را که به آن داده شده است، نمایش میدهد.

مثال ۱:

بیایید یک کامپوننت ساده برای نمایش پیام خوشآمدگویی را بررسی کنیم:

در این مثال، تابع Greeting یک کامپوننت Stateless است، زیرا:

• فقط مقدار name را دریافت میکند.
• هیچ وضعیتی (State) را نگه نمیدارد.
• هر بار که name تغییرکند، مقدار جدید را نمایش میدهد.

مثلاً اگر مقدار name برابر "Mohammad" باشد، این کامپوننت همیشه "Hello , Mohammad" را نمایش خواهد داد، مگر اینکه مقدار جدیدی برای name ارسال شود.

مثال ۲:

• بررسی تابع MyCustomButton:

• کامپوزبل MyCustomButton به فراخوان خود وابسته است تا (label) و کلیک لیسنر را دریافت کند و هیچ شیء State را نگه نمیدارد. به همین دلیل، این یک کامپوزبل Stateless است.

مزایا و معایب کامپوننتهای Stateless

✅ مزایا:

• سادگی: خواندن، درک و تست آنها بسیار آسان است.
• قابلیت استفاده مجدد: میتوان آن را در بخشهای مختلف برنامه با دادههای متفاوت استفاده کرد.
• عملکرد بهتر: سریعتر اجرا میشود زیرا نیازی به مدیریت وضعیت ندارد.

❌ معایب:

• محدودیت در عملکرد: نمیتواند بهتنهایی تغییرات پویا یا تعاملات کاربر را مدیریت کند.

۲. کامپوننت Stateful

یک کامپوننت Stateful دارای وضعیت داخلی (State) است و خروجی آن علاوه بر ورودیها، به وضعیت داخلی خودش نیز بستگی دارد. این نوع کامپوننتها به عنوان "کامپوننتهای هوشمند" (Smart Components) شناخته میشوند، زیرا میتوانند به ورودیهای کاربر واکنش نشان دهند، محاسبات انجام دهند و وضعیت خود را تغییر دهند. این تغییر وضعیت باعث بازسازی (Recompose) مجدد کامپوننت خواهد شد.

به بیان دیگر یک کامپوننت Stateful مانند یک کنترل تلویزیون است. به خاطر میآورد که آخرین بار کدام دکمه را فشار دادهاید و صفحه نمایش تلویزیون را بر اساس آن تغییر میدهد.

در Jetpack Compose، یک کامپوننت Stateful وضعیت داخلی خود را نگه میدارد و به تغییرات پاسخ میدهد.

مثال ۱:

بیایید یک دکمه بسازیم که تعداد کلیکهای کاربر را شمارش کند:

در این مثال، ClickCounter یک کامپوننت Stateful است، زیرا:

• خودش متغیر count را ایجاد میکند و مقدار آن را نگه میدارد.
• مقدار count را هنگام کلیک کردن تغییر میدهد.
• به وضعیت داخلی خود وابسته است و هر بار که count تغییر کند، کامپوننت (Recompose) میشود.

مثال ۲:

بررسی Composable دارای وضعیت (Stateful) :

در این مثال، تابع Greeting یک کامپوننت Stateful است زیرا:

• خودش وضعیت isExpanded را ایجاد میکند.
• این وضعیت را در داخل خود نگه میدارد.
• میتواند مقدار isExpanded را تغییر دهد.

در اینجا، متغیر isExpanded مشخص میکند که متن باید کامل نمایش داده شود یا خیر و مقدار آن هنگام کلیک روی IconButton تغییر میکند.

مزایا و معایب کامپوننتهای Stateful

✅ مزایا:

• تعامل پذیری بالا: میتواند ورودیهای کاربر را مدیریت کند و به تغییرات پاسخ دهد.
• امکانات غنی تر: برای ایجاد رابطهای کاربری تعاملی و پویا مناسب است.

❌ معایب:

• پیچیدگی بیشتر: درک، تست و نگهداری آن دشوارتر است.
• عملکرد پایینتر: به دلیل مدیریت وضعیت، ممکن است کندتر باشد.

چه زمانی از هرکدام استفاده کنیم؟

✅ کامپوننت های Stateless مناسب هستند برای:

• نمایش دادههای ثابت و غیرپویا.
• عناصر ساده UI که نیازی به تعامل با کاربر ندارند.
• کامپوننتهایی که باید در بخشهای مختلف برنامه استفاده شوند.

✅ کامپوننت های Stateful مناسب هستند برای:

• عناصر تعاملی که نیاز به پاسخگویی به ورودی کاربر دارند.
• مدیریت دادههای پویا که در طول زمان تغییر میکنند.
• رابط های کاربری پیچیده که باید وضعیت خود را کنترل کنند.

نتیجه گیری

درک تفاوت بین Stateful و Stateless برای ساخت رابط های کاربری بهینه و قابل نگهداری در Jetpack Compose ضروری است.

🔹 کامپوننت های Stateless ساده، قابل استفاده مجدد و سریع هستند، و برای نمایش دادههای ثابت ایدهآلاند.
🔹 کامپوننت های Stateful برای مدیریت تعاملات کاربر و دادههای پویا ضروریاند، اما پیچیدگی و هزینه عملکردی بیشتری دارند.

📌 بهترین روش: در پروژههای واقعی، اغلب از ترکیب Stateful و Stateless استفاده میشود تا انعطافپذیری ، تستپذیری و قابلیت استفاده مجدد را افزایش دهیم.

ممنون که تا آخر این پست همراه من بودید ، امیدوارم براتون مفید بوده باشه 🙌🙏✌ (:

بقیه آموزش های من با نام (mister developer) را می توانید در تلگرام و اینستاگرام دنبال کنید!!

کانال تلگرام: mister_developerr

اینستاگرام: mister_developerr

موفق و پیروز باشید