سلام عزیزان ، به پارت دوازدهم از سری مقالات " آموزش مقدماتی React" خیلی خوش اومدین . در این مقاله قرار هست که اول با مفهوم key در React آشنا بشیم و بعد چند لاجیک مختلف رو به برنامه مون اضافه کنیم .
قبل از شروع این بخش ، state ای که در کامپوننت App تعریف کردیم رو بصورت زیر تغییر میدیم :
و حالا چونکه state برنامه رو تغییر دادیم ، پس قاعدتا باید فایل های Persons.jsx و Person.jsx رو هم تغییر بدیم :
در ادامه اگر به کنسول مرورگرمون مراجعه کنیم میبینیم که همچین هشداری بهمون نمایش داده میشه :
این هشدار به ما میگه که React به دنبال یک prop خاص بنام key میگرده اما نمیتونه اونو پیدا کنه ! بطور خلاصه Key یک property خاص هست که هنگام کار با لیست ها باید تعریف بشه . در واقع بدون تعریف key ، ممکنه برنامه مون با اختلال مواجه بشه و در پروژه های مختلف بخصوص در پروژه های بزرگ ، Resource زیادی مصرف بشه . بزارین براتون بیشتر بشکافم :
ری اکت یک چیزی به اسم virtual DOM داره و هنگام مقایسه ی اون با DOM فعلی ، هر قسمتی از DOM جدید که با DOM قبلی متفاوت باشه ، اون قسمت رو از دوباره برامون render میکنه . حالا مشکل اینجاست که در لیست ها باید چیزی مثل یک id وجود داشته باشه که به React اجازه بده هر کدوم از المنت ها رو بصورت خاص شناسایی کنه تا به جای render کردن دوباره ی کل عناصر در لیست ، فقط عناصری رو مجددا render کنه که تغییر کردن ! حالا برای اینکه قابلیت شناسایی عناصر لیست رو برای React فراهم کنیم ، باید از key ها استفاده کنیم . همین :)
در ادامه به نکته ی مهمی که باید بهش توجه کنیم این هست که مقدار هر key باید یک مقدار منحصر به فرد و یکتا باشه ! همونطور که میدونیم در حالت عادی اطلاعات هر Person باید از پایگاه داده دریافت بشه و id مخصوص به خودش رو داشته باشه ، اما از اونجایی که ما در کدمون از پایگاه داده استفاده نمیکنیم ، بنابراین باید بصورت دستی براشون مقدار خاصی رو تعیین کنیم :
حالا بصورت زیر از این id ها به عنوان مقدار key در داخل کامپوننت Persons استفاده میکنیم :
حالا اگر مجددا کنسول مرورگرمون رو چک کنیم متوجه میشیم که دیگه با خطای key در قسمت console مواجه نیستیم و حالا یک لیست کاملا پویا داریم :
حالا بعد از رفع این مشکل ، میتونیم چند فیچر دیگه که وابسته به ID هستن رو به برنامه مون اضافه کنیم :) به عنوان مثال در ادامه میخوایم کاری کنیم تا هنگام کلیک بر روی هر شخص ، با توجه به ID ای که اون شخص داره ، اون رو از لیست نمایش مخاطبین حذف کنیم ! برای این منظور در داخل کامپوننت App یک handler جدید بصورت زیر تعریف میکنیم :
و بعد این متد رو بصورت آبجکت در قالب props به کامپوننت Persons انتقال میدیم :
سپس متد موردنظرمون رو در داخل فایل Persons.jsx به اینصورت از کامپوننت Persons به کامپوننت Person انتقال میدیم :
و در نهایت این متد رو بصورت زیر در کامپوننت Person صدا میزنیم تا هنگام کلیک بر روی هر کاربر فراخونی بشه :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که همه چیز به درستی داره کار میکنه ! خوب خسته که نیستین ؟ امیدوارم تا اینجا همه چیز اوکی باشه :) بنظرم بیاین دو تا فیچر دیگه رو هم به برنامه مون اضافه کنیم و بعد این بخش رو به اتمام برسونیم ...
در ادامه میخوایم برای هر فرد یک input عادی از نوع text قرار بدیم تا همزمان با نوشتن در input مربوط به هر Person ، اسمش بصورت Real Time تغییر کنه . برای این منظور ابتدا وارد فایل Person.jsx میشیم و یک input عادی به کامپوننتمون اضافه میکنیم :
حالا اگر به مرورگر بریم ، میبینیم که ظاهر برنامه مون به اینصورته :
خوب همونطور که میبینیم استایل برنامه مون یک مشکل کوچیک داره و اونم این هست که نوشته ی داخل input ها بصورت ltr دارن نمایش داده میشن . برای رفع این مشکل میتونیم پراپرتی direction:”rtl” رو به استایل های فایل Person.module.css اضافه کنیم :
حالا اگر مجددا به مرورگر بریم ، میبینیم که مشکل استایلمون حل شده اما برنامه مون یک باگ مهم داره و اونم این هست که اگر رو هر input کلیک کنیم ، به ما اجازه ی تایپ رو نمیده ! بنظرتون چرا این اتفاق میفته ؟ بهش فکر کنین جوابش خیلی سادست ! دلیلش اینه که ما تو کامپوننت Person اومدیم رویداد ای که برای حذف بود رو به عنصر div ریشه ای دادیم :
برای رفع این مشکل ، میتونیم برای کامپوننت مون یک button تعریف کنیم و عمل حذف رو به اون واگذار کنیم :
حالا اگر خروجی برنامه مون رو چک کنیم ، میبینیم که همه چیز داره به درستی کار میکنه :
خوب بریم سراغ اصل موضوع که گفتیم میخوایم همزمان با نوشتن در داخل input مربوط به هر Person ، اسمش رو بصورت Real Time تغییر بدیم . برای این منظور در داخل کامپوننت App یک handler جدید به اینصورت تعریف میکنیم :
و بعد این متد رو بصورت آبجکت در قالب props به کامپوننت Persons انتقال میدیم :
سپس متد موردنظرمون رو در داخل فایل Persons.jsx به اینصورت از کامپوننت Persons به کامپوننت Person انتقال میدیم :
و در نهایت این متد رو بصورت زیر در کامپوننت Person صدا میزنیم تا هنگام عمل فراخونی بشه :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که همه چیز داره به درستی کار میکنه و اگر در داخل Input هر Person چیزی بنویسیم ، اسمش بطور Real Time تغییر میکنه که در زیر مشاهده میکنیم :
حالا بیایم یک مقدار حرفه ای تر عمل کنیم ، یعنی بیایم ساختار پروژه رو طوری تغییر بدیم که خودمون بتونیم افراد مختلف رو به برنامه مون اضافه کنیم و در صورت نیاز اون هارو حذف یا ویرایش کنیم . برای این منظور در داخل کامپوننت App یک تگ input و یک تگ button جدید تعریف میکنیم :
و بعد محتوای state مون رو بصورت زیر تغییر میدیم :
و در مرحله ی بعد یک handler جدید به اینصورت تعریف میکنیم :
و در آخر این دو متد رو به تگ input و تگ button ی که تعریف کردیم انتساب میدیم :
حالا اگر مجددا تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که عمل اضافه کردن هم داره به درستی کار میکنه :
خوب عزیزان این قسمت هم به پایان رسید و امیدوارم که لذت برده باشین . ما تا به اینجا لاجیک های موردنیازمون رو پیاده سازی کردیم و حالا وقتشه که در قسمت بعدی به برنامه مون یک رنگ و لعاب اساسی بدیم تا رابط کاربریش بهتر بشه . در رابطه با این مقاله اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن محتوای مقالات کمک کنین .
