برنامه نویسی 475 بازدید

State یک شیء جاوا اسکریپت است که داده‌های دینامیک کامپوننت را نگه‌داری می‌کند و آن را قادر می‌سازد که تغییرات بین رندرها را ردگیری کند. از آنجا که State دینامیک است، تنها به منظور ایجاد تعامل‌پذیری استفاده می‌شود و از این رو در مورد پروژه‌های استاتیک React کاربردی ندارد.

کامپوننت‌ها به صورت کلاس‌هایی تعریف می‌شوند که ویژگی‌های اضافی دارند. State محلی دقیقاً به معنای یک ویژگی است که تنها در کلاس‌ها وجود دارد. State صرفاً درون کلاس می‌تواند مورد استفاده قرار گیرد و معمولاً تنها جایی است که می‌توان this.state را به عنوان سازنده مطرح کرد.

امروزه می‌توان از State بدون سازنده و از طریق «مقداردهی اولیه مشخصه» (Property initializers) استفاده کرد که ویژگی جدیدی محسوب می‌شود.

State درون کامپوننت مدیریت می‌شود، همان طور که متغیرها درون یک تابع اعلان می‌شوند. State در کامپوننت React در واقع حالت محلی خودش است، یعنی حالت نمی‌تواند خارج از کامپوننت مورد دسترسی یا تغییر قرار گیرد و تنها درون آن کاربرد دارد. این وضعیت شبیه تابعی است که حیطه محلی خود را دارد.

setState چه نقشی دارد؟

()setState یک به‌روزرسانی برای شیء state کامپوننت را زمان‌بندی می‌کند. زمانی که حالت تغییر یابد، کامپوننت از طریق رندرگیری مجدد پاسخ می‌دهد.

استفاده صحیح از State

  • State را به صورت مستقیم دستکاری نکنید.
  • به‌روزرسانی‌های State می‌توانند ناهمگام باشند.
  • به‌روزرسانی‌های State ادغام می‌شوند.

در ادامه هر یک از موارد فوق را توضیح می‌دهیم.

State را به صورت مستقیم دستکاری نکنید

منظور از این نکته آن است که نباید state را به صورت مستقیم تغییر داد، زیرا مانند مثال زیر باعث می‌شود که کامپوننت به صورت خودکار رندرگیری مجدد نشود:

در عوض باید از آن به صورت زیر استفاده کرد:

و همچنان که قبلاً اشاره کردیم، تنها جایی که می‌توان this.state را انتساب داد در سازنده (constructor) است.

به‌روزرسانی‌های State می‌توانند ناهمگام باشند

React ممکن است چندین فراخوانی ()setState را به منظور افزایش عملکرد با هم در یک به‌روزرسانی تجمیع کند.

فراخوانی‌های setState زمانی که درون «دستگیره‌های رویداد» (event handlers) قرار دارند، ناهمگام هستند. در این حالت ما از this.state برای نشان دادن مقدار جدید بلافاصله پس از فراخوانی setState استفاده نمی‌کنیم.

برای اصلاح این وضعیت باید از شکل دوم setState استفاده کنیم که به جای یک شیء؛ تابعی را می‌پذیرد تا مطمئن شوید که فراخوانی همواره از جدیدترین نسخه از state استفاده می‌کند.

ارسال یک تابع به‌روزرسانی کننده، امکان دسترسی به مقدار کنونی حالت را درون updater فراهم می‌سازد. از آنجا که setState تجمیع می‌شود، این شرایط اجازه می‌دهد که به‌روزرسانی‌ها به هم زنجیر شوند و تضمین شود که به جای تداخل؛ بر روی همدیگر قرار گرفته‌اند:

ضمناً می‌توان props را به عنوان آرگومان دوم در زمان اعمال به‌روزرسانی ارسال کرد:

به‌روزرسانی‌های حالت ادغام می‌شوند

زمانی که ()setState فراخوانی می‌شود، ری‌اکت شیئی را که به حالت جاری ارسال کرده‌اید ادغام می‌کند. برای نمونه حالت می‌تواند شامل چندین متغیر مستقل از هم باشد:

در این صورت می‌توان آن‌ها را به صورت مستقل از هم با فراخوانی‌های مجزای ()setSatet به‌روزرسانی کرد:

در این حالت، ادغام کردن به صورت سطحی رخ می‌دهد و از این رو ({this.setState({comments باعث می‌شود this.state.posts دست‌نخورده بماند؛ اما به طور کامل جایگزین this.state.comments می‌شود.

ممکن است بپرسید که ()ComponentDidMount چیست و چگونه استفاده می‌شود. این متدی است که بی‌درنگ پس از سوار شدن کامپوننت (یعنی درج آن در درخت) فراخوانی می‌شود. مقداردهی اولیه که نیازمند گره‌های DOM است باید در این جا صورت بگیرد. بنابراین اگر می‌خواهید داده‌هایی را از یک نقطه انتهایی ریموت (API) بارگذاری کنید، این جا محل خوبی برای مقداردهی اولیه درخواست شبکه است.

همان طور که در مثال فوق می‌بینید، مشخصات this.state اینک مستقل هستند و به صورت مجزا به this.setState اضافه می‌شوند، یک شیء به هر مشخصه ارسال می‌شود و به وسیله ()ComponentDidMount احاطه شده است که پس از دریافت پاسخی از ()etchPosts و ()fetchComments به درخت DOM اضافه خواهد شد.

گردش رو به پایین داده‌ها

نه کامپوننت‌های والد و نه کامپوننت‌های فرزند نمی‌توانند بدانند که یک کامپوننت خاص با حالت (stateful) یا بی حالت (stateless) است و اهمیتی هم نمی‌دهند که حالت به صورت تابع یا کلاس تعریف شده است. این مشخصات جز برای کامپوننتی ک مالک است و آن را تنظیم می‌کند قابل دسترسی نیستند. به همین دلیل است که state در اغلب موارد، محلی (local) یا کپسوله (encapsulated) نامیده می‌شود.

یک کامپوننت می‌تواند انتخاب کند که حالت خود را به صورت props به کامپوننت‌های فرزندش ارسال کند. این وضعیت برای کامپوننت‌های تعریف شده از سوی کاربر نیز عمل می‌کند:

کامپوننت FormattedDate می‌تواند date را در props خود دریافت کند و نمی‌تواند بداند که از حالت Clock یا از props آن آمده است و یا به صورت دستی وارد شده است:

این وضعیت گردش داده‌های بالا به پایین یا غیر جهت‌دار نامیده می‌شود. هر حالتی همواره از سوی کامپوننت خاصی مالکیت می‌شود و هر داده یا UI که از آن حالت مشتق شده باشد تنها بر روی کامپوننت‌های زیر آن کامپوننت در درخت مؤثر خواهد بود.

کامپوننت‌ها به واقع ایزوله هستند و به صورت مستقل از هم به‌روزرسانی می‌شوند.

حالت اختیاری است. از آنجا که state باعث افزایش پیچیدگی و کاهش بهره‌وری می‌شود ترجیح کلی بر استفاده از کامپوننت‌های بدون state است. با این که در اپلیکیشن‌های تعامل‌پذیر به استفاده از state نیاز داریم؛ اما باید از استفاده بیش از حد از کامپوننت‌های با حالت اجتناب کنید.

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

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

telegram
twitter

میثم لطفی

«میثم لطفی» دانش‌آموخته ریاضیات و شیفته فناوری به خصوص در حوزه رایانه است. وی در حال حاضر علاوه بر پیگیری همه علاقه‌مندی‌های خود در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و تولید محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار نیز با مجله فرادرس همکاری دارد.

بر اساس رای 1 نفر

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *