این رایگان است (e) state – DEV Community

بیایید در مورد ایالات صحبت کنیم، در زمینه ایجاد رابط های کاربری، چه یک برنامه وب، چه برنامه های دسکتاپ یا تلفن همراه.

ایالت چیست؟ چرا از آن استفاده می کنیم، به آن نیاز داریم؟ چگونه باید از آن استفاده کنیم؟ و چرا/ کجا نباید از آن استفاده کنیم؟

قانون 1: چی

یک وضعیت می تواند نماینده UI شما در هر نقطه از زمان باشد، هر چیزی که روی صفحه باشد می تواند به عنوان وضعیت برنامه شما در نظر گرفته شود. این مانند این است که یک عکس فوری از برنامه خود صحبت کنید و اطلاعات مربوط به رنگ‌ها، فونت‌ها، داده‌ها، تعاملات همه چیز را حفظ کنید.

این برنامه به ما می گوید در حال حاضر یک برنامه چگونه و چیست و بسته به انتخاب هایی که کاربر انجام می دهد چه اتفاقی می افتد.

این اطلاعات شما را از بک‌اند، کنش‌ها و تعاملات تولید شده توسط کاربر نگهداری می‌کند.

عمل 2: چرا

چرا به ایالت نیاز داریم؟ چرا از حالت ها در برنامه خود استفاده می کنیم؟ آیا ما حتی به یک دولت نیاز داریم؟ چند نوع حالت می تواند وجود داشته باشد؟

همه این سوالات بسیار ذهنی و نظری هستند، و در اینجا 2 سنت من در مورد آن است.

نیاز: برای نگهداری اطلاعاتی که ممکن است بسته به شرایط خاصی مانند تعامل کاربر یا بارگیری مجموعه جدیدی از داده ها تغییر کند. برای “انجام کاری، زمانی که چیزی اتفاق می افتد”.

استفاده: برای تغییر فقط آن بخش‌هایی از رابط کاربری که در صورت تغییر یا اتفاق افتادن چیزی باید تغییر کنند. این می تواند یک کلیک، یک شناور، یک فشار طولانی باشد که هر 3 ثانیه نوار بارگیری را تازه می کند. این می تواند هر چیزی باشد. تصور کنید وقتی یک دکمه فشار داده می شود، کل برنامه را دوباره بارگیری کنید.

آیا نیاز داریم: بله و خیر

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

ثابت نگه ندارید که ممکن است به صورت هاردکد باشد و هرگز از طریق هیچ تعاملی با کاربر تغییر نکند/ برای ایجاد یک تعامل کاربر یا اینکه رابط را به یک “حالت” در برنامه شما تغییر ندهد.

به عنوان مثال می‌توانید چیزی را از حافظه محلی دستگاهتان بارگیری کنید یا مجموعه‌ای از ثابت‌ها را برای ترسیم حروف اول نام کاربری خود با رنگ‌ها نگه دارید.

هر چیزی که فقط یک بار بارگیری می شود و هرگز دوباره بارگذاری نمی شود می تواند فقط یک متغیر باشد.

از لحاظ فنی زمانی که از “setState” یا “getState” استفاده می کنیم، این یک حالت است اما در زمینه “state” نیست.

توجه داشته باشید که چگونه یک تابع دو طرفه است، نشان دادن رابط کاربری شما به حالت و وضعیت شما به رابط کاربری بستگی دارد.

تغییر در وضعیت، بارگیری یک داده، می تواند UI شما را تغییر دهد و تغییر در UI، انتخاب یک فیلتر، می تواند وضعیت شما را تغییر دهد.

من فقط یک قسمت از اطلاعات را در حالت “وضعیت” نگه می‌دارم که تغییر در آن فوراً در UI منعکس شود و فقط در صورتی که نیاز به انتقال آن اطلاعات به تعامل بعدی داشته باشم، یک قطعه از UI را به حالت “state” نشان می‌دهم.

قانون 3: چگونه

بسته به فناوری که استفاده می کنید، گزینه های مختلفی برای استفاده از حالت ها در برنامه خود خواهید داشت.

اما دو نوع عمده وجود دارد که باید از هم متمایز شوند

1. حالت گسترده برنامه – این بخش از اطلاعات قرار است در مکان‌های مختلف مورد استفاده قرار گیرد و با تأکید بر و، می‌توان آن را از چندین مکان تغییر داد. اگر قرار است فقط خوانده شود، ممکن است با خواندن مستقیم آن از منبع به جای تحمل دردسر راه اندازی یک وضعیت در سطح برنامه، مشکلی نداشته باشید.

   اطلاعات سطح برنامه مانند طرح زمینه رابط کاربری، اطلاعات احراز هویت کاربر، اطلاعات سبد خرید اگر تجارت الکترونیکی است، omnibox و غیره

1. وضعیت سطح کامپوننت/ویجت – این بخش از اطلاعات قرار است در این و حداکثر از دو سطح عمیق جزء/ویجت از این استفاده شود. فقط با استفاده از راه حل سطح جزء/ویجت خوب خواهید بود.

اطلاعات سطح مؤلفه، مانند فیلترهای انتخاب شده در بخش محصول، فونت ترجیحی برای تایپ در کادر ورودی و غیره.

نکته: هرگز از حالت خود برای نگهداری و محاسبه منطق کسب و کار یا منطق برنامه استفاده نکنید، فقط باید دارای منطق UI باشد.

و در پایان، می خواهم به نقل از دن آبراموف
“کاری را انجام دهید که کمتر ناخوشایند است”
چت در یک مشکل github