React چگونه در زیر هود کار می‌کند؟

React یک کتابخانه خیلی محبوب جاوااسکریپتی، با بیش از 5.5 میلیون دانلود در هفته است که از این محبوبیت هم راضی است. اما تعداد کمی از توسعه دهندگان آن می دانند که React در واقع چگونه کار می کند؟

در این پست من تلاش میکنم که بعضی از موارد جالب و کاربردی React را برای شما که توسعه‌دهنده آن هستید، بیان کنم.

اما قبل از اینکه شروع کنیم، اگر شما توسعه‌دهنده آن هستید من خبرهای هیجان انگیزی برایتان دارم! وقتی که شما این مقاله را کامل مطالعه کنید، می توانید موارد جالبی را با React توسعه دهید و جوایزی هم برنده شوید!

React چه کاری انجام می دهد؟

React به طور اساسی از یک درخت برای شما محافظت می کند. این درخت می‌تواند به صورت موثر محاسبات تفاضلی روی گره‌ها انجام دهد.

به کد HTML خود به عنوان یک درخت نگاه کنید. درواقع این دقیقاً روشی است که مرورگر با DOM شما کار می کند (HTMLای که روی مرورگر شما رندر شده است). React به شما اجازه می دهد که DOM خودتان را دوباره در جاوا اسکریپت بسازید و فقط آن تغییراتی را روی DOM اعمال کنید که واقعاً اتفاق افتاده‌اند.

سینتکس JSX به شیرینی شکر!

هیچ چیزی برای جاوااسکریپت و مرورگر مثل JSX نیست.JSX یک آرایش زبانی ساده برای ایجاد هر برنامه جاوااسکریپتی خاص است.

وقتی که شما چیزی مثل این می‌نویسید:

آنچه که در واقع انجام می‌دهید این است:

همانطور که می بینید، نوشتن حلقه های فشرده هم در کد نویسی سخت است و هم پشتیبانی از چنین مجموعه کدی بسیار پیچیده می باشد.JSX

به شما کمک می کند که بتوانید از خطوط پاک‌کننده HTML برای قوی کردن جاوا اسکریپت استفاده کنید. اما اِلِمان سازی React چه کاری برای خودش انجام می‌دهد؟ یک برنامه خطی قدیمی جاوا‌اسکریپت ایجاد می کند. درواقع شما می‌توانید به صورت دستی آن را فراخوانی کنید و برای خودتان مشاهده کنید .

همانطور که می بینید، ما یک برنامه مثل این داریم:

و زمانی که شروع به تودرتو کردن اِلِمانها به صورت زیر می کنیم :

شروع به فرورفتگی کردن برنامه‌ها کرده‌ایم:

بنابراین شما الان می‌دانید زمانی که تمام JSX تجزیه می‌شود و تمام اِلِمان‌سازی‌های React فراخوانی می شوند، ما به یک برنامه دارای فرورفتگی بزرگ مثل بالا می رسیم.

رندرگیری React

الان اگر شما برگردید به نقطه‌ای که ما برنامه خود را از آن آغاز کردیم، خطوط زیر را در لیست خود می‌بینید:

از تصویر بالا متوجه می‌شویم که <App/> تجزیه شده است، که این فقط یک برنامه بزرگ از اِلِمان‌های React است .چگونه React می‌تواند div‌ها و تگ‌های پاراگراف را خارج از آن بسازد؟

پاسخ ،ReactDom است.

ReactDom به نوبه خود بصورت بازگشتی نقاطی را وابسته به نوع و ویژگی آنها ایجاد می‌کند و درنهایت آنها را به DOM اضافه می کند.

در این نقطه، باید واضح باشد که چرا فرایند جداسازی React از رندرگیرها در واقع یک حرکت بزرگ است! کاری که React انجام می دهد، ساخت ساده یک درخت از UI) User Interface) است که می‌تواند، هم برای وب و هم برای هر محیط دیگری مثل موبایل استفاده شود.

با استفاده از آن می‌توان به یک رندرگیر دسترسی پیدا کرد که می‌تواند با OS) Operating System) میزبان ارتباط برقرار کند.

در اینجا React Native به کمک می‌آید. همانطور که می‌بینید،React Native از کتابخانه‌یِ React استفاده می‌کند، اما React Dom در اینجا به عنوان رندر نیست، به جای آن پکیج react-native خودش یک رندرگیر است.

ما برای شروع، این نرم‌افزار را طبق شکل زیر در قالب نرم‌افزار react native انجام می‌دهیم:

همانطور که می‌بینید از ReactDom استفاده نشده است، چرا؟

چون در اینجا ما روش‌هایی مثل appendchild نداریم مگر اینکه محیطی مثل DOM داشته‌باشیم. به جای آن برای موبایل‌ها، ما به یک پشتیبان مستقیم برای UI از OS نیاز داریم.

اما کتابخانه React نیازی به دانستن آن ندارد، چون رندرگیر(ReactNative) از آن محافظت می کند.

React Reconciliation

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

Reactدرواقع Reconciliation تنبلی دارد و مقدار حداقلی از تغییرات ممکن را ایجاد می‌کند به این معنی که سعی می‌کند از اِلِمان‌ها دوباره استفاده کند و حتی در صورت امکان قالب‌سازی کند.

این مثال زیر را در نظر بگیرید :

بیایید فرض کنیم که شما این نوع بیان JSX را با استفاده از بعضی شروط یا بعضی جایگاه‌ها به شکل زیر تغییر می‌دهید:

زمان تغییر کردن، React به خوبی متوجه می‌شود که از تگ‌های img هم در گره‌های قبل و هم در درختهای جدید استفاده کند، به همین دلیل است که آن را اصلاح می‌کنیم و React فقط alt را تغییر می‌دهد.

به هر حال یک Catch وجود دارد. به همین دلیل ما از React نمی‌خواهیم که محاسبات زیادی روی بخش‌های متغیر انجام دهد، React فرض می‌کند که اگر یک والد عوض شود، زیرشاخه‌های وابسته هم حتماً تغییر خواهد کرد.

برای مثال داریم :

اگر شما این JSX را به حالت زیر با استفاده از (شرط/حالت) تغییر دهید:

اگرچه شما می‌توانید ببینید که ما به بازسازی تگP داخل تگ P نیازی نداریم ،اما React هیچ روشی برای دانستن این، زمانی که از بالاترین نقطه درخت برمی‌گردد، ندارد (مگر اینکه شما عملیات سنگین تعویض درخت را که سنگین‌تر از الگوریتم‌های کاشفی که React برای تعویض دنبال می‌کند، انجام دهید).

بنابراین React تصمیم می‌گیرد که تمام زیرشاخه را از بین ببرد، (یعنی عملکرد پاک کردن را در use effect فراخوانی می‌کند یا محتویات وابسته به شاخه را تنظیم می کند) و بعد زیرشاخه ها را از واحد ذخیره‌سازی Scratch بازسازی می‌کند.

کلیدهای React

زمانی که اِلِمانها را در یک گره حذف یا اضافه می‌کنید، React به راحتی حلقه‌های شامل زیرشاخه را در درخت‌های قدیمی و زیرشاخه‌ها را در درخت جدید آن گره اصلاح می‌کند و جاهایی را که نیاز به حذف یا اضافه دارند ،علامت‌گذاری می‌کند، اما این عملیات بدون کمک برنامه‌نویس، عیب‌هایی نیز دارد .

این مثال زیر را در نظر بگیرید:

فرض کنید که این به صورت زیر بوسیله (شرط/حالت) تغییر داده شده است:

زمانی که React شروع به مقایسه این دو تا لیست برای پیدا کردن اختلافات می‌کند، اختلاف‌هایی را در گره زیرشاخه 1 پیدا می‌کند،A قدیمی را به Z جدید تغییر می‌دهد و سپس دوباره در زیرشاخه گره 2، آن را از B قدیمی به A جدید تغییر می‌دهد و در نهایت گره B جدید را اضافه می‌کند.

به هرحال این راه بهتری است برای اینکه گره های A و B موجود را حفظ کند و گره Z را اضافه کند، اما چگونه React این را می‌داند؟

پاسخ، کلیدهای React هستند.

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

روش زیر یک راه موثر برای اِعمال موارد مشابه است :