معرفی
اکوسیستم React در حال تکامل است و React Compiler یک تغییر دهنده بازی است. در اینجا نگاهی جامع به چگونگی افزایش عملکرد این ابزار جدید با خودکارسازی بهینه‌سازی‌ها داریم.
بینش و پیش بینی های من را بررسی کنید.
من معتقدم که لینک های موجود در مقالات می توانند حواس را پرت کنند. منابعی را که به تأملات من کمک کردند را در پایان این مقاله خواهید یافت.
با این گفته، بیایید در زمینه شیرجه بزنیم.
واکنش نشان دهید
در سال 2013، مرورگرها در به روز رسانی DOM ناکارآمد بودند. تیم React رویکرد جدیدی به نام Virtual DOM (VDOM) ایجاد کرد. عناصر ابتدا در VDOM به روز می شوند قبل از اینکه به DOM واقعی منتقل شوند.
واکنش پذیری در React در زمان اجرا کنترل می شود. هنگامی که یک کامپوننت دوباره رندر می شود، نما را همراه با اجزای تو در تو به روز می کند. این فرآیند را می توان با استفاده از تکنیک هایی مانند قلاب (useCallback و useMemo) و حفظ کردن (memo).
شیک
تا سال 2016، مرورگرها تکامل یافته بودند و به روز رسانی مستقیم DOM دیگر به کندی انجام نمی شد. Svelte کد را در جاوا اسکریپت بهینه سازی شده کامپایل می کند که مستقیماً با DOM تعامل دارد.
واکنش پذیری در Svelte در زمان ساخت کنترل می شود. کامپایلر Svelte حالت را به عناصر متصل می کند و امکان به روز رسانی دقیق تری را فراهم می کند.
واکنش پذیری
به نظر می رسد هر کسی تعریف خود را از آن دارد. پس مال من اینجاست:
واکنش پذیری روشی است که نما به تغییر حالت پاسخ می دهد
رابطه بین حالت و دیدگاه به شرح زیر است:
- آ حالت نمایش منطقی الف است چشم انداز
- آ چشم انداز تجلی بصری الف است حالت
بیایید مثال زیر را در نظر بگیریم:
اگر وظیفه جدیدی به لیست اضافه شود، هر دو فریم ورک چگونه واکنش‌پذیری را مدیریت خواهند کرد:
واکنش نشان دهید
React والد را به روز می کند (TodoList) حالت (todos) برای اضافه کردن یک کار جدید. والد را دوباره رندر می کند که هر فرزند را تحریک می کند (Task) رندر مجدد.
این عملیات را می توان با قلاب ها بهینه کرد تا از رندرهای غیر ضروری جلوگیری شود.
شیک
Svelte یک آیتم جدید به حالت اضافه می کند و یک عنصر DOM جدید را به لیست اضافه می کند.
بدون نیاز به بهینه سازی
کامپایلر React
مثال قبلی نیاز به بهینه سازی کد React را برای جلوگیری از رندرهای غیرضروری برجسته می کند. به‌عنوان یک توسعه‌دهنده، احساس می‌کنید که باید خودتان بهینه‌سازی چارچوب را مدیریت کنید.
این می تواند دست و پا گیر باشد و منجر به دو الگوی شود که من در حرفه خود مشاهده کرده ام:
- کسانی که هرگز از قلاب های بهینه سازی استفاده نمی کنند. در انتظار ظاهر شدن یک مشکل بهینه سازی و بررسی و رفع آنها (رویکرد من)
- کسانی که بیش از حد از قلاب های بهینه سازی استفاده می کنند. قرار دادن تمام توابع و محاسبات در قلاب ها برای کاهش احتمال مشکلات بهینه سازی. کاهش همزمان خوانایی و قابلیت نگهداری پایه کد.
این دو رویکرد متضاد اغلب منجر به بحث‌هایی در روابط عمومی می‌شوند و روند کلی کار را کاهش می‌دهند.
کامپایلر React این مشکل را با تجزیه و تحلیل کد شما و اعمال بهینه سازی در زمان ساخت حل می کند.
یک جنبه جالب این است که بهینه سازی از جاوا اسکریپت اولیه استفاده می کند و نه از قلاب.
کامپایلر با استفاده از ابتدایی های سطح پایین به حافظه می سپارد، نه از طریق
useMemo
اگر قبلاً از هوک ها برای بهینه سازی پایه کد خود استفاده کرده اید. نگران نباشید، کامپایلر بهینه سازی های شما را حفظ می کند و به شما امکان می دهد آن را به صورت دانه بندی شده پیاده سازی کنید.
آخرین چیزی که باید در نظر داشته باشید این است که کامپایلر React از اجزایی که به قوانین React احترام نمی‌گذارند صرفنظر می‌کند. برای اطمینان از اینکه پایگاه کد شما به این قوانین احترام می‌گذارد، می‌توانید این قانون خط‌بندی را اضافه کنید — react-compiler/react-compiler – برای این منظور ایجاد شده است.
این اطمینان حاصل می کند که پایگاه کد شما برای آینده مقاوم است و می تواند پس از انتشار از React Compiler استفاده کند.
آینده
اولین نسخه کامپایلر React بر روی قلاب ها تمرکز دارد (useCallback و useMemo) و حفظ کردن (memo) برای تسهیل بهینه سازی. این کد را با استفاده از جاوا اسکریپت اولیه برای دستیابی به آنچه آنها می نامند بهینه می کند.واکنش ریز دانه“.
این رویکرد بسیار شبیه به چیزی است که کامپایلر Svelte در حال حاضر ارائه کرده است.
در آینده، React ممکن است نه تنها در حین کامپایل‌سازی بهینه‌سازی کند، بلکه یک جاوا اسکریپت بهینه‌سازی شده نیز بسازد که مستقیماً با DOM تعامل داشته باشد و انتزاع VDOM را حذف کند که منجر به بهبود عملکرد می‌شود.
امیدوارم از این مقاله لذت برده باشید.
اگر چنین است، در تماس با من دریغ نکنید:
با X (توئیتر) در تماس باشید
اگر نه، لطفاً نظرات خود را در نظرات درج کنید.
منابع
همانطور که وعده داده شده بود، در اینجا همه منابع برای اطلاعات بیشتر در مورد موضوع وجود دارد.
Virtual Dom چیست:
https://www.geeksforgeeks.org/reactjs-virtual-dom/
کنفرانس درباره فلسفه React:
https://www.youtube.com/watch?v=x7cQ3mrcKaY
چرا Virtual Dom بهترین رویکرد نیست:
https://svelte.dev/blog/virtual-dom-is-pure-overhead
همایش فلسفه Svelte:
https://www.youtube.com/watch?v=AdNJ3fydeao
قوانین لینتینگ React-Compiler:
https://www.npmjs.com/package/eslint-plugin-react-compiler
سند کامپایلر React:
https://react.dev/learn/react-compiler
بحث github کامپایلر React:
https://github.com/reactwg/react-compiler/discussions/5
