در فصل قبل، با مفاهیم پایهای کتابخانه React و با کامپوننتها آشنا شدید. در آن فصل، هدف اصلی این بود که با ساختار کلی React، نحوهی نوشتن کامپوننتها و منطق تفکیک رابط کاربری آشنا شوید.
اما کامپوننتهایی که در فصل مقدمه ساختید، بیشتر جنبهی آموزشی داشتند و دادهها در آنها بهصورت ثابت (Static) تعریف شده بودند. در حالی که در پروژههای واقعی، رابط کاربری باید بتواند به تغییرات کاربر واکنش نشان دهد و دادهها را بهصورت داینامیک مدیریت کند.
در این قسمت از دوره آموزش ریاکت، دقیقاً وارد همین بخش مهم میشوید؛ جایی که React از یک ساختار ساده به یک ابزار قدرتمند برای ساخت رابطهای کاربری تعاملی تبدیل میشود. با مفاهیم State، Props و Event یاد میگیرید چگونه دادهها را بین کامپوننتها منتقل کنید، وضعیت هر کامپوننت را مدیریت کنید و به رویدادهای مختلف کاربر واکنش نشان دهید.
معرفی مفاهیم پایه در کتابخانه React
در این قسمت، سه مفهوم بسیار مهم و پرکاربرد در کتابخانه ریاکت را بررسی میکنیم. این مفاهیم شامل State، Props و Event هستند که نقش کلیدی در ساخت و مدیریت کامپوننتها دارند.
بهصورت خلاصه میتوان گفت، State فضایی برای ذخیره و مدیریت دادههای داخلی هر کامپوننت است که بهصورت مستقل عمل میکند. در مقابل، Props روشی برای انتقال داده بین کامپوننتها محسوب میشود و امکان برقراری ارتباط میان آنها را فراهم میکند. Event ها در واقع همان رویدادهایی هستند که در بخشهای مختلف یک برنامه رخ میدهند. در ادامهی این جلسه، با انواع مختلف Eventها و نحوهی استفاده از آنها بهطور کامل آشنا خواهیم شد.
برای درک بهتر سه مفهوم State، Props و Event، یک پروژهی تمرینی آماده کردهایم تا این مفاهیم را بهصورت عملی بررسی کنیم. اما پیش از شروع این پروژه، لازم است مروری کوتاه بر پروژهای داشته باشیم که در فصل اول دوره پیادهسازی کردیم. مثالی که در فصل اول پیادهسازی کردیم، یک نمونهی بسیار ساده بود و هدف اصلی آن، صرفاً پیادهسازی عملی مفاهیم پایهی آن فصل بود. چنین ساختاری در دنیای واقعی کاربرد چندانی ندارد، چرا که در پروژههای واقعی، دادهها باید بهصورت کاملاً داینامیک مدیریت شوند.
در پروژهی فصل اول، دادهها به شکل استاتیک (ثابت) تعریف شده بودند و همانطور که مشاهده کردید، هیچگونه تغییری در کامپوننتها اتفاق نمیافتاد. برای درک بهتر مفاهیم این فصل، یک پروژهی تمرینی بسیار ساده طراحی کردهام تا بتوانیم این مفاهیم را بهصورت کاملاً شفاف و عملی بررسی کنیم. در ادامه، پروژه را با استفاده از دستور npm start اجرا میکنیم تا تفاوت آن را با پروژهی قبلی مشاهده کنیم.
همانطور که مشاهده میکنید، این مثال نیز ساختار سادهای دارد و کارتهایی مشابه مثال قبلی پیادهسازی شدهاند. اما تفاوت اصلی اینجاست که با وجود یکسان بودن ساختار کامپوننتها، دادههای هر کامپوننت با کامپوننت دیگر متفاوت است. برای مثال:
- یک کامپوننت دارای تعداد مشخصی ستاره است.
- کامپوننتی دیگر تصویر متفاوتی دارد.
- یا متن و سطح (Level) هر کارت با کارتهای دیگر فرق میکند.
در واقع، ما با یک کامپوننت یکسان سروکار داریم که چندین بار تکرار شده، اما دادههای ورودی آن در هر بار استفاده متفاوت است.
Props در ری اکت
همانطور که قبلاً اشاره کردیم، روشی که برای انتقال داده بین کامپوننتها استفاده میشود، Props نام دارد. با استفاده از Props میتوان اطلاعات مختلفی مانند تصویر، متن، سطح یا هر دادهی دیگری را از یک کامپوننت به کامپوننت دیگر منتقل کرد.
نحوهی پیادهسازی Props را بهصورت عملی در جلسات آینده بررسی خواهیم کرد و در این جلسه، تمرکز ما صرفاً بر درک مفهوم آن است.
State در ری اکت
مفهوم مهم دیگری که در این فصل با آن سروکار داریم، State یا متغیرهای وضعیت است. State برای ذخیرهسازی دادههایی استفاده میشود که منحصر به همان کامپوننت هستند. برای مثال، در یک کامپوننت میتوان:
- مقدار Level را ذخیره کرد
- تصویر مربوط به آن کامپوننت را نگه داشت
- یا هر اطلاعات دیگری که نیاز به مدیریت داخلی دارد
اگر نیازی به تغییر مقادیر نداشته باشیم، نه به State نیاز داریم و نه حتی به Props؛ همانطور که در مثال فصل قبل مشاهده کردید. اما زمانی که بخواهیم دادهها را داینامیک کنیم، استفاده از State و Props ضروری خواهد بود.
دادهها را میتوان با استفاده از Props به کامپوننتها منتقل کرد و با استفاده از State مقادیر را ذخیره و مدیریت نمود تا امکان تغییر آنها فراهم شود.دلیل اصلی استفاده از State این است که هر زمان تغییری در مقدار آن ایجاد شود، کامپوننت بر اساس مقدار جدید دوباره رندر (Re-render) میشود. بهعبارت دیگر، State به ما این امکان را میدهد که تغییرات را در رابط کاربری بهصورت پویا مشاهده کنیم.
Event در ری اکت
Eventها همان رویدادهایی هستند که درون المنتها اتفاق میافتند و ما از قبل در HTML با آنها آشنا بودهایم؛ رویدادهایی مانند:
- Click
- Blur
- Focus
- Mouse
- Submit
این رویدادها در React نیز مورد استفاده قرار میگیرند، با این تفاوت که سینتکس پیادهسازی آنها کمی متفاوت است. در بخش پیادهسازی عملی، این تفاوتها را بهصورت کامل بررسی خواهیم کرد. در این پروژه، برای هر یک از این رویدادها یک Event مشخص و اختصاصی تعریف شده است. با وقوع هر Event، چه تغییری در State ایجاد میشود و این تغییر چگونه باعث رندر مجدد کامپوننت خواهد شد.
بهعنوان مثال، روی کامپوننتی که در حال حاضر مقدار Level = 2 و دو ستاره دارد تمرکز میکنیم. با کلیک روی دکمهی مربوطه، مشاهده میکنید که مقدار Level به 3 افزایش پیدا میکند و تعداد ستارهها نیز یک واحد بیشتر میشود.
این رفتار نتیجهی تعریف یک Event از نوع Click برای این دکمه است.
برای پیادهسازی چنین تغییری، ناچار به استفاده از State هستیم؛ زیرا با هر تغییر در State، کامپوننت بهصورت خودکار رندر مجدد میشود و تغییرات در رابط کاربری اعمال میگردد. اگر یک بار دیگر روی دکمه کلیک کنیم، مقدار Level به 4 و تعداد ستارهها نیز به 4 افزایش پیدا میکند. نکتهی مهم اینجاست که این تغییرات فقط روی همان کامپوننت اعمال میشوند و هیچکدام از کامپوننتهای دیگر دچار تغییر یا رندر مجدد نمیشوند. برای مثال:
- اگر مقدار Level یک کامپوننت را کاهش دهیم، تنها همان کامپوننت بهروزرسانی میشود.
- یا اگر برای کامپوننت دیگری چند ستاره اضافه کنیم، این تغییرات فقط مختص همان کامپوننت خواهد بود.
بررسی تغییر State در DevTools
برای درک بهتر این موضوع، با استفاده از گزینهی Inspect و ابزار توسعهدهنده، ساختار کامپوننتها را بررسی میکنیم. در این مثال، داخل کامپوننت اصلی (App) شش کامپوننت مجزا ایجاد شده است که هرکدام State مخصوص به خود را دارند. بهعنوان نمونه:
- برای یکی از این کامپوننتها مقدار اولیهی State برابر با 3 تعریف شده است.
- با کلیک روی دکمه، مقدار State به 4 تغییر میکند.
- همزمان با این تغییر، مقدار Level و تعداد ستارهها نیز بهروزرسانی میشوند.
در حالی که State سایر کامپوننتها بدون تغییر باقی میماند.
این مثال بهخوبی نشان میدهد که:
- هر کامپوننت در React، State مستقل خود را دارد.
- تغییر State باعث رندر مجدد همان کامپوننت میشود.
- سایر کامپوننتها، تا زمانی که State یا Props آنها تغییر نکند، رندر نخواهند شد.
جمعبندی
در این مثال عملی، سه مفهوم مهم State، Props و Event را بهصورت همزمان بررسی کردیم و نحوهی تعامل آنها با یکدیگر را مشاهده نمودیم. همچنین دیدیم که چگونه Eventها باعث تغییر State میشوند و این تغییرات، رندر مجدد کامپوننتها را به همراه دارند.
در ادامهی این فصل، پیادهسازی عملی این مفاهیم را بهصورت کامل انجام خواهیم داد و تلاش میکنیم پس از درک دقیق مفاهیم، یک پروژهی مناسب پیادهسازی کنیم تا این مباحث بهطور کامل برای شما تثبیت شوند