آشنایی با الگوریتم Reconciliation ری اکت

تو این مقاله می‌خوام با یک مثال ساده، در مورد الگوریتم Reconciliation ری اکت صحبت کنم. ری اکت از الگوریتم پیشرفته Reconciliation برای افزایش پرفورمنس موقع آپدیت کردن DOM استفاده می‌کنه. مکانیسم Reconciliation به صورت بازگشتی (recursively) درخت DOM رو برای تغییرات جدید بررسی می‌کنه.

این مکانیسم با مقایسه همه نودهای DOM ، تغییرات جدید رو متوجه میشه و اون هارو توی DOM اصلی تغییر میده. برای مثال این تکه رو در نظر بگیرید، یک لیست ساده HTML که دو مقدار First & Second رو می‌خواهد نمایش بده:

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

البته منظورم اضافه کردن با متد insert هست که آیتم جدید در ابتدای آیتم های قبلی قرار می‌گیره

ری اکت مقایسه بین درخت DOM جدید و قدیمی رو شروع می‌کنه.
محتوای المان <ul> تغییری کرده (مشخصاتی مثل کلاس و استایل نداشته که تغییر کنه) پس به اولین المان <li> می‌رسیم.
تو درخت قدیمی این مقدار First بود ولی اینجا Third پس این خط از کد رو به عنوان یه تغییر جدید فلگ میذاره ( که توی ‌DOM اصلی تغییرش بده).
دومین <li> رو بررسی می‌کنه. این مقدار تو DOM قبلی Second بود ولی اینجا First شده. پس این رو هم به عنوان تغییر جدید می‌بینه.
می‌رسه به آخرین <li> و مقدار قدیمیش رو با مقدار فعلیش مقایسه می‌کنه. مقدار قبلیش وجود نداشته (خالی بوده) و مقدار جدیدش Second شده. پس این هم یک تغییر دیگه.

الگوریتم reconciliation ری اکت ، سه تا تغییر توی مقایسه DOM قبلی و جدید پیدا کرد. پس اونهار به منزله تغییر جدید ارزیابی می‌کنه و DOM جدید رو متناسب با تغییرات جدید ، تغییر میده. ( کامپوننت‌های لازم رو re-render می‌کنه)

اگه دقت کرده باشید ما مقدار جدید Third که اضافه کردیم رو به آیتم هامون insert کردیم. برای همین مقدار Third بالاتر از First قرار گرفت. و همین موضوع باعث شد که ری اکت،‌ سه تا تغییر جدید تو این قسمت مشاهده کنه.

اگر از append استفاده می‌کردیم چی؟

در صورتی که از append استفاده می‌کردیم، مقدار جدید، در انتهای لیست ما قرار می‌گرفت و الگوریتم ری اکت فقط یک تغییر توی DOM جدید به نسبت DOM قبلی پیدا می‌کرد و در نتیجه فقط یک نود نیاز به آپدیت شدن داشت در صورتی که با متد insert سه تا نود رو آپدیت کردیم.

ما که نمی‌تونیم همیشه از متدهای append & insert برای ایجاد تغییرات جدید استفاده کنیم. اما دیدیم که استفاده از append به جای insert کمک زیادی به افزایش performance الگوریتم ری اکت داشت.

یکی دیگه از امکانات خوب ری اکت ویژگی key توی المنت هاست . کدی که با insert بود رو یادتونه ؟

خوب اگه ما یک کلید به همه اعضای لیستمون داده بودیم چه اتفاقی می افتاد‌؟

قبل از تغییرات:

به نسبت قبل ما یک کلید اختصاصی به هر آیتم دادیم.

بعد از تغییرات:

بعد از اضافه کردن آیتم جدید ( حتی به روش insert) الگوریتم هوشمند ری اکت با بررسی کلیدها کارو شروع می‌کنه،‌ و چون کلید های ۱ و ۲ همچنان موجود هستند (‌و فقط جاشون عوض شده) تشخصی میده که نیازی به آپدیت آیتم های قبلی نیست و فقط آیتم جدید با کلید ۳ رو به عنوان تغییر در نظر می‌گیره. به این شکل دیگه مشکل تغییر مجدد آیتم های قبلی حل می‌شه.

استفاده از کلیدها در ری اکت بسیار مهم هست مخصوصا زمانی که روی یک آرایه متدهای map و ... استفاده می‌کنید. برای آشنایی با قواعد استفاده از کلیدها، به مقاله زیر سر بزنید و نکته ۲ رو مطالعه کنید:

سایر نوشته های من در ویرگول:

Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123