نمای کلی اجرایی و اهمیت معماری

انتشار مربوط به خلاصه‌ کنفرانس React Conf 2021 نقطه‌عطفی در تکامل مهندسی فرانت‌اند مدرن محسوب می‌شود. از لحاظ تاریخی، کنفرانس‌های ریکت به‌عنوان سکوی پرتابی برای فناوری‌های تحول‌آفرین عمل کرده‌اند؛ به‌ویژه ریکت نیتیو و هوک‌های ریکت که نحوه ساخت برنامه‌های بومی و وب توسط مهندسان را برای همیشه تغییر دادند. امسال، تیم اصلی چشم‌اندازی جامع و چندپلتفرمی را رونمایی کرد که با معرفی ریکت ۱۸ و پذیرش تدریجی ویژگی‌های رندرینگ همزمان لنگر انداخته است. این انتشار، ریکت را به‌طور اساسی از یک کتابخانه رابط کاربری سنکرون و مسدودکننده، به یک زمان‌اجرای آسنکرون و قابل‌وقفه تبدیل می‌کند که قادر است تعاملات هدایت‌شده توسط کاربر را بر محاسبات سنگین پس‌زمینه اولویت دهد.

در هسته معماری خود، ادغام ویژگی‌های همزمان یک گلوگاه عملکردی چندین‌ساله در برنامه‌های تک‌صفحه‌ای را حل می‌کند: ناتوانی در متوقف کردن ساخت درخت رندر پرهزینه. پیش‌تر، هنگامی که ریکت رندر کردن یک درخت کامپوننت را آغاز می‌کرد، رشته اصلی (Main Thread) تا اتمام کار قفل می‌شد و اغلب باعث افت فریم، پاسخ‌های کند به ورودی و لرزش (Jank) در طول انتقال وضعیت‌های پیچیده می‌شد. با جداسازی رندرینگ از ثبت در DOM، ریکت ۱۸ همزمانی را به‌جای یک سطح API مجزا، به‌عنوان یک مکانیسم زیربنایی معرفی می‌کند. این تغییر پارادایم به برنامه‌ها اجازه می‌دهد تا حتی تحت بارهای محاسباتی شدید، روانی ۶۰ فریم بر ثانیه را حفظ کنند و معیارهای عملکرد در سطح سازمانی را از نو تعریف نمایند.

بهبودهای کلیدی و ارگونومی توسعه‌دهنده

برجسته‌ترین بهبود معماری در این نسخه، رسمی شدن قابلیت‌های رندرینگ همزمان است که با هوک‌های نوآورانه‌ای مانند useTransition و useDeferredValue هدایت می‌شود. رابط برنامه‌نویسی useTransition به توسعه‌دهندگان اجازه می‌دهد به‌روزرسانی‌های وضعیت خاص را به‌عنوان موارد غیرفوری علامت‌گذاری کنند و به موتور بازسنجی (Reconciliation Engine) دستور دهند که هنگام وقوع کارهای با اولویت بالا -مانند تایپ کردن کاربر یا کلیک روی دکمه- کنترل را به مرورگر بازگرداند. این کار تضمین می‌کند که مسیرهای ورودی حیاتی مسدود باقی نمانند و به بازیابی داده‌های پس‌زمینه یا فیلتر کردن لیست‌های سنگین اجازه دهد تا بدون فریز کردن رابط کاربری، به‌صورت آسنکرون اجرا شوند. به‌طور مشابه، useDeferredValue به توسعه‌دهندگان امکان می‌دهد به‌روزرسانی‌های پروپ غیرحیاتی را محدود کنند و انیمیشن‌ها و گذارهای روانی را در حالی که مقادیر به تعویق افتاده در پس‌زمینه همگام می‌شوند، تضمین کنند.

تکمیل‌کننده این اصول اولیه همزمانی، معرفی دسته‌بندی خودکار (Automatic Batching) است که یک برد ارگونومیک بزرگ برای توسعه‌دهندگان محسوب می‌شود. در نسخه‌های قبلی، به‌روزرسانی‌های وضعیتی که خارج از هندلرهای رویداد ریکت -مانند درون setTimeout، پرامیس‌ها یا شنوندگان رویداد بومی- ایجاد می‌شدند، منجر به چندین رندر مجدد مجزا می‌شدند. ریکت ۱۸ دسته‌بندی آماده را برای تقریباً تمام به‌روزرسانی‌های وضعیت معرفی می‌کند و چندین فراخوانی setState را در یک پاس رندر واحد، صرف‌نظر از محل منشأ آن‌ها، گروه‌بندی می‌کند. این امر چرخه‌های رندر غیرضروری را به‌طور چشمگیری کاهش می‌دهد و تنظیم عملکرد را ساده می‌کند و به مهندسان اجازه می‌دهد کدهای بصری بنویسند بدون اینکه به طور دستی از پوشش‌های ناپایدار یا هک‌های عملکردی استفاده کنند.

ماتریس مقایسه معماری

تغییرات ناسازگار و هشدارهای مهاجرت

گذار به این عصر معماری جدید مستلزم بررسی دقیق تغییرات ناسازگار (Breaking Changes) است که عمدتاً حول رفتارهای پیش‌فرض مانند دسته‌بندی خودکار می‌چرخد. در حالی که دسته‌بندی خودکار عملکرد را بهبود می‌بخشد، پایگاه‌های کدی که برای خواندن‌های سنکرون DOM بلافاصله پس از به‌روزرسانی وضعیت در یک زمینه آسنکرون تلاش می‌کنند، ممکن است شرایط مسابقه (Race Conditions) ظریفی را تجربه کنند. برای انصراف از دسته‌بندی خودکار در موارد خاص قدیمی، توسعه‌دهندگان می‌توانند از API flushSync استفاده کنند، هرچند که استفاده از آن باید به‌شدت ممیزی شود.

علاوه بر این، تغییر بنیادین به رندرینگ همزمان مستلزم پذیرش API جدید ریشه (createRoot) است که ReactDOM.render را منسوخ می‌کند. حالت سخت‌گیرانه (Strict Mode) نیز برای شبیه‌سازی حذف و نصب مجدد کامپوننت‌ها در نسخه‌های آینده بهبود یافته است و باگ‌های همگام‌سازی وضعیت پنهان را در روش‌های چرخه عمر قدیمی آشکار می‌کند. با این حال، تیم ریکت این نسخه را با در نظر گرفتن یک استراتژی پذیرش تدریجی طراحی کرده است؛ برنامه‌ها می‌توانند در یک حالت قدیمی سازگار با عقب اجرا شوند در حالی که توسعه‌دهندگان به تدریج کامپوننت‌ها را به ریشه‌های همزمان مهاجرت می‌دهند.

راهنمای گام‌به‌گام ارتقا

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

1. به‌روزرسانی وابستگی‌ها از طریق مدیر بسته با اجرای دستور زیر در ترمینال خود، مطمئن شوید که وابستگی‌های پروژه شما به آخرین بسته‌های ریکت ۱۸ به‌روزرسانی شده‌اند:

   npm install react@latest react-dom@latest
   

2. مهاجرت به API ریشه جدید مقداردهی اولیه قدیمی ReactDOM.render را در فایل نقطه ورود خود (مثلاً index.js) با API جدید createRoot جایگزین کنید تا ویژگی‌های همزمان باز شوند:

   import React from 'react';
   import { createRoot } from 'react-dom/client';
   import App from './App';
   
   const container = document.getElementById('root');
   const root = createRoot(container);
   root.render(<App />);
   

3. پذیرش تدریجی هوک‌های همزمان اصول اولیه همزمانی مانند useTransition را به‌صورت انتخابی در کامپوننت‌های حساس به عملکرد وارد کنید:

   import { useState, useTransition } from 'react';
   
   function SearchComponent() {
     const [isPending, startTransition] = useTransition();
     const [filter, setFilter] = useState('');
   
     const handleChange = (e) => {
       startTransition(() => {
         setFilter(e.target.value);
       });
     };
   
     return (
       <div>
         <input />
         {isPending && <p>در حال به‌روزرسانی نتایج...</p>}
       </div>
     );
   }