ببینیم React Fiber چیه و چکار می کنه؟

خب React Fiber یک تغییر معماری اصلیه که در React 16 معرفی شد و هدفش کارآمدتر کردن و درک آسان‌تر کتابخونه است. این نشون دهنده تغییر قابل توجهی از الگوریتم اصلی تطبیق React هست که بر اساس یک مدل single thread و concurrent برای به روز رسانی DOM بود. معماری Fiber، رندر asynchronous و رویکردی جزئی‌تر را برای مدیریت به‌روزرسانی‌ها معرفی می‌کند که امکان عملکرد و تجربه کاربری بهتری رو فراهم می‌کنه.

مفاهیم کلیدی React Fiber

نودهای Fiber

در قلب معماری فیبر، نودهای فیبر قرار دارن. هر کامپوننت در یک برنامه ری اکت دارای یک نود فیبر مرتبطه که حاوی اطلاعاتی در مورد نحوه به روز رسانی کامپوننت هست. این شامل نوع کار (به عنوان مثالlayout و painting)، کامیت بودن آن در صفحه و موقعیت آن در درخت کامپوننت ها است.

class MyComponent extends React.Component {
  render() {
     return <div>Hello, world!</div>;
  }
}

در این مثال، MyComponent یک نود فیبر متناظر داره که نحوه رندر کردن این کامپوننت را توضیح می‌ده.

واحدهای کاری یا Work Unit ها

فرآیند به روز رسانی UI به واحدهای کوچکتر به نام "کار" (work) تقسیم می شود. سه نوع کار وجود دارد:

اول Reconciliation: تعیین اینکه چه چیزی بین DOM مجازی و DOM واقعی تغییر کرده است.

دوم committing: اعمال تغییرات در DOM.

سوم Rendering: در حال آماده سازی به روز رسانی بعدی.

هر واحد کار رو می تونیم به صورت ناهمزمان(asynchronous) برنامه ریزی و اجرا کنیم و عملکرد را به ویژه برای برنامه های پیچیده بهبود بدیم.

برنامه ریز یا Scheduler

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

حالت همزمان یا Concurrent Mode

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

چطور کار می کنه؟

وقتی که یه تغییر حالت در یک برنامه ری اکتی رخ می ده، مراحل زیر با استفاده از معماری Fiber انجام می شود:

اصلاح یا Reconciliation: ری اکت با مقایسه DOM مجازی فعلی با DOM جدید ایجاد شده پس از تغییر حالت شروع می شه. این فرآیند مشخص می کند که چه بخش هایی از DOM باید به روز شود.

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

زمان‌بندی کار: بر اساس تفاوت‌های موجود در حین reconcilation، ری اکت موارد کاری را زمان‌بندی می‌کنه. این موارد نشان دهنده وظایف مورد نیاز برای به روز رسانی UI هستند، مانند رندر مجدد کامپوننت ها یا اعمال انتقال CSS.

اجرای کار: Scheduler این موارد کاری را به صورت ناهمزمان اجرا می کنه و اطمینان حاصل می کنه که به روز رسانی های با اولویت بالا قبل از موارد با اولویت پایین تر تکمیل می شن.

انجام تغییرات: زمانی که همه موارد کاری پردازش شدن، ری اکت تغییرات را در DOM انجام می ده و اونها را برای کاربر قابل مشاهده می کنه.

نتیجه

ری اکت فایبر، نشان دهنده یک تحول بزرگ در معماری ری اکت هست و مفاهیمی مانند نودهای فیبر، واحدهای کاری، Scheduler و Concurrent Mode را معرفی می کنه. React Fiber با تقسیم فرآیند رندر به قطعات کوچکتر و قابل مدیریت و اجرای آنها به صورت ناهمزمان، عملکرد، پاسخگویی و تجربه توسعه دهنده را بهبود می بخشه. همونطور که ری اکت به تکامل خود ادامه می دهد، درک معماری فیبر برای ساخت برنامه های کاربردی وب کارآمد و مقیاس پذیر اهمیت فزاینده ای پیدا می کنه.