سلام. توی این قسمت، میخوام راجع به رندرنیگ المنتا توی ریکت حرف بزنم. اگه قسمت قبلیو نخوندین، پیشنهاد میدم حتما بخونید.
همونطور که میدونید تگ های جی اس ایکسی توی ریکت، اسکلت وبسایت شما رو میسازن. توی ریکت، المنت هایی که تعریف میکنیم بر خلاف المنت های دام مرورگر، آبجکت هستن. توی قسمت قبل این رو گفتم. و ReactDOM.render با استفاده از اون آبجکت ها توی یو آی تغییرات ایجاد میکنن.
توی ریکت، توی فایل index.html اگر دقت کنید یک تگ دیو با آی دی root وجود داره.(اگر پروژه ریکت که توی مقاله قبل آموزششو گفتم ساخته باشید) در واقع ریکت دام این دیو رو مدیریت میکنه. به دیو یا دیو هایی که توسط ریکت دام کنترل میشن، میگن المنت روت. میتونید آی دیشونو هم تغییر بدید. که البته موقع رندر کردن المنتا با استفاده از ReactDOM.render باید اون دیو رو با آی دی ای که انتخاب کردین واسش النتخاب کنید.
توی اپ هایی که فقط با استفاده از ریکت ساخته شدن، معمولا یه دونه روت المنت وجود داره. ولی توی اپ هایی که فقط از یه سری امکانات ریکت استفاده میکنن و خودشون با چیزای دیگه مثلا اچ تی ام ال و سی اس اس و وانیلا جاوا اسکریپت توسعه داده شدن، ممکنه چندین روت المنت داشته باشن.
برای اضافه کردن المنت های ساخته شدتون به روت المنت، همونطور که از قسمت قبلی یادتون هست باید از ReactDOM.render استفاده کنید.
المنت های ریکت غیر قابل تغییر هستن. یعنی وقتی شما اون ها رو ساختید دیگه نمیتونید اتریبیوت ها و یا فرزاندای اون ها رو تغییر بدید. ولی ممکنه شما بخواید اپتون رو داینامیک بسازید. مثلا میخواید ساعت بسازید. خب باید تکست کانتنت تگتون که ساعت و تاریخ هست عوض بشه. اینجا در حال حاضر با دانشی که از ریکت و جاوا اسکریپت دارید، شما میتونید یه فانکشن بسازید و اونجا المنتایی که ساعتتون رو نمایش میده رو بسازید و سپس توی همون فانکشن، با استفاده از ReactDOM.render تگ رو مجدد اضافه کنید به روت المنتتون. بعدش با استفاده از setInterval هر یک ثانیه اون فانکشنتون رو صدا بزنید. همین مثال رو خود داکیومنت ریکت زده.
میتونید نتیجه این کد رو ازین لینک ببینید. کد رو ویرایش هم میتونید کنید.
یه چیزی که خیلی جالب هست اینه که ریکت دام، فقط تغییرات ضروری رو اعمال میکنه! یعنی چی؟ یعنی فقط اون تکستی که تغییر کرده! و این خیلی خفنه! مثلا توی کد بالا، فقط {new Date().toLocaleTimeString()} تغییر میکنه نه تگ دیگه ای یا تکست دیگه ای! خیلی جالبه. خود داکیومنت ریکت هم با یه گیف این رو ثابت کرده:
توی این گیف اون تکستی که چشمک میزنه یعنی داره تغییر میکنه. همونطور که میبینید تکستای دیگه یا تگای دیگه تغییر نمیکنن و فقط اونچیزی که نیازه و باید آپدیت بشه که ساعت هست تغییر میکنه. این باعث میشه که خیلی از اشکالات ما در رابطه به تغییر دادن دام رفع بشه و اینکه کار کمتری هم انجام میده برناممون. چون کلا اضافه کردن و کلا کار با دام، کار نسبتا سنگینی هست و به این فکر کنید که اگه کل تگ اضافه شده به دام تغییر میکرد بهتر بود یا الان که فقط اون چیزی که نیازه تغییر میکنه؟ کدوم کار کمتری انجام میده؟ صددرصد آپدیت کردن چیزی که نیازه کار کمتری انجام میده.
امیدوارم از این قسمت هم خوشتون اومده باشه. منتظر قسمت سوم باشید...
اگه دوست داشتید لایک کنید مقاله مو. اگه دوست داشتید دنبال کنید من رو. اگه دوست داشتید یه کامنت مثبت و یا انتقاد منطقی بزارید واسم. خلاصه هرکاری دوست داشتید توی زندگیتون انجام بدید؛ هرکاری که به کسی آسیب نزنه و یا غمگینش نکنه :)
