ری‌اکت کامپایلر

دوبله فارسی مقاله ری‌اکت کامپایلر. که بخشی از مقاله ری‌اکت لبز امساله. ری‌اکت لبز مقاله‌ایه که تیم ری‌اکت به صورت سالیانه منتشر میکنه و توش درمورد کارایی که انجام داده و داره انجام میده توضیح میده. آدرس اصل مقاله: react.dev/blog اولین آیتم.

تاریخ انتشار 15 فوریه 2024 (26 بهمن 1402)
لینک ویدیو اینستاگرام همین مقاله (برای گوش دادن بصورت پادکست)

ری‌اکت کامپایلر

ری‌اکت کامپایلر دیگه یه پروژه تحقیقاتی نیست: الان از کامپایلر توی محیط پروداکشنِ instagram.com استفاده میشه (نسخه وب)، و داریم سعی میکنیم کامپایلر رو به اپلیکیشن‌های دیگه Meta هم منتقل کنیم و اولین انتشار open-sourceاش رو آماده کنیم.

وقتی که state تغییر میکنه، ری‌اکت گاهاً میتونه خیلی re-render انجام بده. از همون روزای اولی که ری‌اکت اومد راه‌حال ما برای همچین مواردی، مِموئیزِیشِن دستی بوده. یعنی استفاده از APIهای useMemo، useCallback و memo برای تنظیم دستی میزان re-render ری‌اکت به هنگام تغییر state. اما مِموئیزِیشِن دستی خطریه. موجب درهم‌ریختگی کد میشه، به راحتی میشه اشتباه پیاده‌سازیش کرد، و بروزنگه‌داشتنش هم کار اضافه میطلبه.

مِموئیزِیشِن دستی یه خطر منطقیه، ولی ما راضی نبودیم. چشم‌انداز ما برای ری‌اکت اینه که بدون به‌خطر انداختن مدل ذهنی اصلی ری‌اکت، وقتی که state تغییر کرد، خودش به شکل اتومات قسمت‌های لازم رو توی UI ری‌رندر کنه. — خرد کردن UI به فاکنش‌های ‌ساده‌ای که هرکدوم state مخصوص خودشون رو دارن، با همه مقادیر و اصطلاحات استاندارد جاوااسکریپتی — ما براین باور هستیم که این رویکرد ری‌اکت یکی از مهمترین دلایلیه که توسط این همه دولوپر پذیرفته شده و داره ازش استفاده میشه. واسه همینه که روی ساخت یه کامپایلر بهینه‌ساز سرمایه‌گذاری کردیم.

جاوااسکریپت به خاطر قوانین شل و ول و ماهیت پویا و متغیری که داره، برای بهینه‌سازی، زبان چالش‌برانگیزی محسوب میشه. ری‌اکت کامپایلر میتونه با مدل‌سازی همزمان قوانین جاوااسکریپت و "قوانین ری‌اکت"، کد رو به طور ایمن کامپایل کنه. مثلاً کامپوننت‌های ری‌اکت باید ایدمپوتنت باشند، — یعنی با دادن ورودی‌های یکسان، همواره باید مقدار یکسانی رو برگردونن — و نمی‌تونن مقادیر props یا state رو تغییر بدن. این قوانین با محدود کردن دولوپرها کمک میکنه که یه فضای امن برای کامپایلر ایجاد بشه که بتونه به‌درستی بهینه‌سازیش رو انجام بده.

البته ما میدونیم که دولوپرها گاهی یکم قوانین رو تغییر میدن، و هدفمون هم اینه که کامپایلر ری‌اکت بتونه از همون اول روی اکثر کدها کار کنه. کامپایلر سعی میکنه تشخیص بده که چه زمانی کد دقیقاً از قوانین ری‌اکت پیروی نمیکنه و اون موقع یا کد رو جایی که امنه کامپایل میکنه یا اگه ایمن نباشه از کامپایل صرف نظر میکنه. ما در حال تست کردن این رویکرد روی codebase بزرگ و متنوع متا هستیم تا به اعتبار این رویکرد کمک کنیم.

برای دولوپرهایی که میخوان مطمئن بشن کدشون با قوانین ری‌اکت سازگاری داره، توصیه میکنیم حالت Strict Mode رو فعال کنن و پلاگینESLint عه ری‌اکت رو روی کدشون کانفیگ کنن. این ابزارها می‌تونن به شناسایی باگ‌های ظریف توی کد ری‌اکت شما کمک کنند، کیفیت برنامه‌های شما را همین امروز بهتر میکنن و برنامه‌های شما را برای ویژگی‌های آینده مثل کامپایلر ری‌اکت آماده می‌کنن. ما همچنین داریم روی مستندات تجمیعی از قوانین ری‌اکت و آپدیت‌های افزونه ESLintمون کار میکنیم تا به تیم‌ها کمک کنیم این قوانین رو برای ایجاد برنامه‌های قوی‌تر درک و اعمال کنند.

برای اینکه عملکرد کامپایلر رو ببینید میتونید صبحت پاییز پارسالمون رو ببینید (پاییز میلادی). اون موقع ما یه سری اطلاعات تجربی اولیه از امتحان کردن React Compiler روی یکی از صفحات instagram.com داشتیم. از اون موقع، از کامپایلر داریم روی محیط پروداکشن instargram.com استفاده می‌کنیم. همچنین برای تسریع توضیع به بقیه محیط های Meta و پروژه های open source، تیممون رو هم بزرگتر کردیم. درمورد مسیر پیش‌ رو هیجان‌زده‌ایم و در ماه‌های آینده چیزای بیشتری برای به اشتراک گذاری خواهیم داشت.