معماری فیبر ری‌اکت: درک فرآیند تطبیق (Reconciliation)

ری‌اکت با معماری مبتنی بر کامپوننت و مدل برنامه‌نویسی اعلانی خود، انقلابی در توسعه فرانت‌اند ایجاد کرده است. در قلب کارایی ری‌اکت، فرآیند تطبیق (reconciliation) آن قرار دارد – مکانیزمی که ری‌اکت با آن DOM واقعی را برای انعکاس تغییرات در درخت کامپوننت‌ها به‌روزرسانی می‌کند. این فرآیند تکامل چشمگیری داشته و به معماری فیبر (Fiber) منتهی شده است. این مقاله درک جامعی از فیبر ری‌اکت و تأثیر آن بر تطبیق ارائه می‌دهد.

تطبیق (Reconciliation) چیست؟

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

فرآیند تطبیق بر اساس دو فرض اصلی هدایت می‌شود:

• المان‌هایی با انواع مختلف، درخت‌های متفاوتی تولید خواهند کرد.
• توسعه‌دهنده می‌تواند با یک پراپ key به ری‌اکت اطلاع دهد که کدام المان‌های فرزند ممکن است در رندرهای مختلف پایدار باقی بمانند.

تطبیق سنتی (قبل از فیبر)

در پیاده‌سازی اولیه ری‌اکت، فرآیند تطبیق همزمان (synchronous) و تقسیم‌ناپذیر بود. این بدان معنا بود که وقتی ری‌اکت فرآیند مقایسه DOM مجازی و به‌روزرسانی DOM واقعی را شروع می‌کرد، نمی‌توانست متوقف شود. این موضوع می‌توانست به مشکلات عملکردی منجر شود، به خصوص در برنامه‌های پیچیده با درخت‌های کامپوننت بزرگ. اگر به‌روزرسانی یک کامپوننت زمان زیادی می‌برد، مرورگر پاسخگو نبود و منجر به تجربه کاربری ضعیفی می‌شد. این مشکل اغلب به عنوان مشکل "لگ" یا "jank" شناخته می‌شود.

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

معرفی فیبر ری‌اکت

فیبر ری‌اکت (React Fiber) بازنویسی کاملی از الگوریتم تطبیق ری‌اکت است که در ری‌اکت ۱۶ معرفی شد. هدف اصلی آن بهبود پاسخگویی و عملکرد درک‌شده برنامه‌های ری‌اکت، به ویژه در سناریوهای پیچیده است. فیبر این کار را با تقسیم فرآیند تطبیق به واحدهای کاری کوچکتر و قابل توقف انجام می‌دهد.

مفاهیم کلیدی پشت فیبر ری‌اکت عبارتند از:

• فیبر (Fibers): یک فیبر یک شیء جاوااسکریپت است که یک واحد کار را نشان می‌دهد. این شیء اطلاعاتی در مورد یک کامپوننت، ورودی و خروجی آن را در خود نگه می‌دارد. هر کامپوننت ری‌اکت یک فیبر متناظر دارد.
• حلقه کار (WorkLoop): یک حلقه کار، حلقه‌ای است که در درخت فیبر پیمایش کرده و کارهای لازم برای هر فیبر را انجام می‌دهد.
• زمان‌بندی (Scheduling): زمان‌بند (scheduler) بر اساس اولویت تصمیم می‌گیرد که چه زمانی یک واحد کار را شروع، متوقف، از سر بگیرد یا رها کند.

مزایای معماری فیبر

معماری فیبر چندین مزیت قابل توجه را فراهم می‌کند:

• تطبیق قابل توقف: فیبر به ری‌اکت اجازه می‌دهد تا فرآیند تطبیق را متوقف و از سر بگیرد، و از مسدود شدن نخ اصلی توسط کارهای طولانی‌مدت جلوگیری می‌کند. این تضمین می‌کند که رابط کاربری حتی در طول به‌روزرسانی‌های پیچیده، پاسخگو باقی بماند.
• به‌روزرسانی‌های مبتنی بر اولویت: فیبر به ری‌اکت امکان می‌دهد انواع مختلف به‌روزرسانی‌ها را اولویت‌بندی کند. به عنوان مثال، تعاملات کاربر، مانند تایپ کردن یا کلیک کردن، می‌توانند اولویت بالاتری نسبت به کارهای پس‌زمینه، مانند واکشی داده، داشته باشند. این تضمین می‌کند که مهم‌ترین به‌روزرسانی‌ها ابتدا پردازش شوند.
• رندر ناهمزمان: فیبر به ری‌اکت اجازه می‌دهد تا رندر را به صورت ناهمزمان (asynchronously) انجام دهد. این بدان معناست که ری‌اکت می‌تواند رندر یک کامپوننت را شروع کرده و سپس متوقف شود تا به مرورگر اجازه دهد کارهای دیگر مانند ورودی کاربر یا انیمیشن‌ها را مدیریت کند. این کار عملکرد و پاسخگویی کلی برنامه را بهبود می‌بخشد.
• مدیریت خطای بهبودیافته: فیبر مدیریت خطای بهتری را در طول فرآیند تطبیق فراهم می‌کند. اگر خطایی در حین رندر رخ دهد، ری‌اکت می‌تواند با ظرافت بیشتری بازیابی کند و از کرش کردن کل برنامه جلوگیری کند.

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

درک ساختار فیبر

هر کامپوننت ری‌اکت با یک گره فیبر (Fiber node) نمایش داده می‌شود. گره فیبر اطلاعاتی در مورد نوع کامپوننت، پراپ‌ها، وضعیت و روابط آن با دیگر گره‌های فیبر در درخت را در خود نگه می‌دارد. در اینجا برخی از ویژگی‌های مهم یک گره فیبر آورده شده است:

• type: نوع کامپوننت (مثلاً یک کامپوننت تابعی، یک کامپوننت کلاسی، یک المان DOM).
• key: پراپ key که به کامپوننت ارسال شده است.
• props: پراپ‌هایی که به کامپوننت ارسال شده‌اند.
• stateNode: نمونه‌ای از کامپوننت (برای کامپوننت‌های کلاسی) یا null (برای کامپوننت‌های تابعی).
• child: یک اشاره‌گر به اولین گره فیبر فرزند.
• sibling: یک اشاره‌گر به گره فیبر هم‌سطح بعدی.
• return: یک اشاره‌گر به گره فیبر والد.
• alternate: یک اشاره‌گر به گره فیبر که وضعیت قبلی کامپوننت را نشان می‌دهد.
• effectTag: یک پرچم که نوع به‌روزرسانی مورد نیاز برای اعمال بر روی DOM را نشان می‌دهد.

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

الگوریتم حلقه کار (WorkLoop)

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

حلقه کار از دو فاز اصلی تشکیل شده است:

• فاز رندر (Render Phase): در طول فاز رندر، ری‌اکت درخت فیبر را پیمایش کرده و تغییراتی را که باید در DOM اعمال شود، تعیین می‌کند. این فاز قابل توقف است، به این معنی که ری‌اکت می‌تواند آن را در هر زمانی متوقف و از سر بگیرد.
• فاز کامیت (Commit Phase): در طول فاز کامیت، ری‌اکت تغییرات را در DOM اعمال می‌کند. این فاز قابل توقف نیست، به این معنی که ری‌اکت باید پس از شروع، آن را کامل کند.

فاز رندر با جزئیات

فاز رندر را می‌توان به دو زیرفاز تقسیم کرد:

• beginWork: تابع beginWork مسئول پردازش گره فیبر فعلی و ایجاد گره‌های فیبر فرزند است. این تابع تعیین می‌کند که آیا کامپوننت نیاز به به‌روزرسانی دارد یا نه و در صورت نیاز، گره‌های فیبر جدیدی برای فرزندان آن ایجاد می‌کند.
• completeWork: تابع completeWork مسئول پردازش گره فیبر فعلی پس از پردازش فرزندانش است. این تابع DOM را به‌روزرسانی کرده و طرح‌بندی (layout) کامپوننت را محاسبه می‌کند.

تابع beginWork وظایف زیر را انجام می‌دهد:

1. بررسی می‌کند که آیا کامپوننت نیاز به به‌روزرسانی دارد یا خیر.
2. اگر کامپوننت نیاز به به‌روزرسانی داشته باشد، پراپ‌ها و وضعیت جدید را با پراپ‌ها و وضعیت قبلی مقایسه می‌کند تا تغییرات مورد نیاز را تعیین کند.
3. گره‌های فیبر جدیدی برای فرزندان کامپوننت ایجاد می‌کند.
4. ویژگی effectTag را روی گره فیبر تنظیم می‌کند تا نوع به‌روزرسانی مورد نیاز برای اعمال بر روی DOM را نشان دهد.

تابع completeWork وظایف زیر را انجام می‌دهد:

1. DOM را با تغییراتی که در طول تابع beginWork تعیین شده‌اند، به‌روزرسانی می‌کند.
2. طرح‌بندی کامپوننت را محاسبه می‌کند.
3. عوارض جانبی (side effects) که باید پس از فاز کامیت انجام شوند را جمع‌آوری می‌کند.

فاز کامیت با جزئیات

فاز کامیت مسئول اعمال تغییرات در DOM است. این فاز قابل توقف نیست، به این معنی که ری‌اکت باید پس از شروع، آن را کامل کند. فاز کامیت از سه زیرفاز تشکیل شده است:

• beforeMutation: این فاز قبل از تغییر DOM اجرا می‌شود. از آن برای انجام کارهایی مانند آماده‌سازی DOM برای به‌روزرسانی‌ها استفاده می‌شود.
• mutation: در این فاز تغییرات واقعی DOM انجام می‌شود. ری‌اکت DOM را بر اساس ویژگی effectTag گره‌های فیبر به‌روزرسانی می‌کند.
• layout: این فاز پس از تغییر DOM اجرا می‌شود. از آن برای انجام کارهایی مانند به‌روزرسانی طرح‌بندی کامپوننت و اجرای متدهای چرخه حیات (lifecycle) استفاده می‌شود.

مثال‌های عملی و قطعه کدها

بیایید فرآیند تطبیق فیبر را با یک مثال ساده نشان دهیم. کامپوننتی را در نظر بگیرید که لیستی از آیتم‌ها را نمایش می‌دهد:

```javascript function ItemList({ items }) { return (

{items.map(item => (
• {item.name}
))}

); } ```

هنگامی که پراپ items تغییر می‌کند، ری‌اکت باید لیست را تطبیق داده و DOM را مطابق با آن به‌روزرسانی کند. در اینجا نحوه مدیریت این کار توسط فیبر آمده است:

1. فاز رندر: تابع beginWork آرایه جدید items را با آرایه قبلی items مقایسه می‌کند. این تابع مشخص می‌کند که کدام آیتم‌ها اضافه، حذف یا به‌روزرسانی شده‌اند.
2. گره‌های فیبر جدید برای آیتم‌های اضافه شده ایجاد می‌شوند و effectTag برای نشان دادن این که این آیتم‌ها باید در DOM درج شوند، تنظیم می‌شود.
3. گره‌های فیبر برای آیتم‌های حذف شده برای حذف علامت‌گذاری می‌شوند.
4. گره‌های فیبر برای آیتم‌های به‌روزرسانی شده با داده‌های جدید آپدیت می‌شوند.
5. فاز کامیت: سپس فاز commit این تغییرات را در DOM واقعی اعمال می‌کند. آیتم‌های اضافه شده درج می‌شوند، آیتم‌های حذف شده حذف می‌شوند و آیتم‌های به‌روزرسانی شده اصلاح می‌شوند.

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

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

زمان‌بندی و اولویت‌بندی

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

ری‌اکت چندین API برای زمان‌بندی به‌روزرسانی‌ها با اولویت‌های مختلف فراهم می‌کند:

• React.render: یک به‌روزرسانی را با اولویت پیش‌فرض زمان‌بندی می‌کند.
• ReactDOM.unstable_deferredUpdates: یک به‌روزرسانی را با اولویت پایین‌تر زمان‌بندی می‌کند.
• ReactDOM.unstable_runWithPriority: به شما اجازه می‌دهد تا اولویت یک به‌روزرسانی را به صراحت مشخص کنید.

به عنوان مثال، می‌توانید از ReactDOM.unstable_deferredUpdates برای زمان‌بندی به‌روزرسانی‌هایی که برای تجربه کاربر حیاتی نیستند، مانند ردیابی تحلیل‌ها یا واکشی داده در پس‌زمینه، استفاده کنید.

```javascript ReactDOM.unstable_deferredUpdates(() => { // به‌روزرسانی‌های غیرحیاتی را اینجا انجام دهید updateAnalyticsData(); }); ```

مدیریت خطا با فیبر

فیبر مدیریت خطای بهبودیافته‌ای را در طول فرآیند تطبیق فراهم می‌کند. هنگامی که خطایی در حین رندر رخ می‌دهد، ری‌اکت می‌تواند خطا را گرفته و از کرش کردن کل برنامه جلوگیری کند. ری‌اکت از مرزهای خطا (error boundaries) برای مدیریت خطاها به شیوه‌ای کنترل‌شده استفاده می‌کند.

یک مرز خطا کامپوننتی است که خطاهای جاوااسکریپت را در هر جای درخت کامپوننت فرزند خود می‌گیرد، آن خطاها را ثبت می‌کند و به جای درخت کامپوننت کرش‌کرده، یک رابط کاربری جایگزین (fallback UI) نمایش می‌دهد. مرزهای خطا، خطاها را در حین رندر، در متدهای چرخه حیات و در سازنده‌های کل درخت زیر خود می‌گیرند.

```javascript class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // وضعیت را به‌روزرسانی کنید تا رندر بعدی رابط کاربری جایگزین را نشان دهد. return { hasError: true }; } componentDidCatch(error, errorInfo) { // همچنین می‌توانید خطا را به یک سرویس گزارش خطا ارسال کنید logErrorToMyService(error, errorInfo); } render() { if (this.state.hasError) { // می‌توانید هر رابط کاربری جایگزین سفارشی را رندر کنید return

Something went wrong.

; } return this.props.children; } } ```

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

```javascript ```

اشکال‌زدایی (Debugging) فیبر

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

React Profiler به شما امکان می‌دهد عملکرد برنامه خود را ضبط کرده و گلوگاه‌ها را شناسایی کنید. می‌توانید از Profiler برای دیدن مدت زمان رندر هر کامپوننت و شناسایی کامپوننت‌هایی که باعث مشکلات عملکردی می‌شوند، استفاده کنید.

React DevTools همچنین یک نمای درختی از کامپوننت‌ها ارائه می‌دهد که به شما امکان می‌دهد پراپ‌ها، وضعیت و گره فیبر هر کامپوننت را بازرسی کنید. این می‌تواند برای درک چگونگی ساختار درخت کامپوننت و نحوه کارکرد فرآیند تطبیق مفید باشد.

نتیجه‌گیری

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

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

همچنان که ری‌اکت به تکامل خود ادامه می‌دهد، فیبر بخش بنیادی معماری آن باقی خواهد ماند. با به‌روز ماندن با آخرین تحولات در فیبر، می‌توانید اطمینان حاصل کنید که برنامه‌های ری‌اکت شما از مزایای عملکردی که ارائه می‌دهد، به طور کامل بهره می‌برند.

در اینجا چند نکته کلیدی آورده شده است:

• فیبر ری‌اکت یک بازنویسی کامل از الگوریتم تطبیق ری‌اکت است.
• فیبر به ری‌اکت اجازه می‌دهد تا فرآیند تطبیق را متوقف و از سر بگیرد و از مسدود شدن نخ اصلی توسط کارهای طولانی‌مدت جلوگیری کند.
• فیبر به ری‌اکت امکان می‌دهد انواع مختلف به‌روزرسانی‌ها را اولویت‌بندی کند.
• فیبر مدیریت خطای بهتری را در طول فرآیند تطبیق فراهم می‌کند.
• پراپ key برای تطبیق کارآمد بسیار مهم است.
• افزونه مرورگر React DevTools مجموعه قدرتمندی از ابزارها را برای اشکال‌زدایی برنامه‌های فیبر فراهم می‌کند.

با پذیرش فیبر ری‌اکت و درک اصول آن، توسعه‌دهندگان در سراسر جهان می‌توانند برنامه‌های وب کارآمدتر و کاربرپسندتری بسازند، صرف نظر از موقعیت مکانی یا پیچیدگی پروژه‌هایشان.