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

React 17 تا اواسط سال 2021 آخرین نسخه منتشر شده React بود و تغییرات زیادی در آن ایجاد نشده بود، اما به‌روزرسانی React در نسخه 18 آن ویژگی‌های زیادی را به آن افزوده است که در این مقاله قصد داریم با این ویژگی‌ها آشنا شویم. 

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

 

دلیل محبوبیت React چیست؟

آیا می‌دانستید کهReact  یک فریم‌ورک 7 ساله است؟ با گذشت سریع زمان در این مدت، React به یکی از فراگیرترین فناوری‌های توسعه وب تبدیل شده است. با انتشار هر نسخه جدید نیز محبوبیت آن به یک رکورد جدید می‌رسد. در واقع، طبق آخرین نظرسنجی Stack Overflow 2020، React پرکاربردترین فریم‌ورک توسعه فرانت‌اند در میان توسعه‌دهندگان است. 

چنین محبوبیتی معمولاً به ویژگی‌هایی نسبت داده می‌شود که توسعه React را از همه رقبا متمایز می‌کند. ارتباط داده قدرتمند و ماهیت مبتنی بر کامپوننت، مدل Document Object و غیره، همگی از ویژگی‌های این فریم‌ورک است. همه این ویژگی‌ها، نقطه مشترک توسعه فرانت‌اند مبتنی بر React از ابتدا بوده‌اند و به بهبود عملکرد آن کمک کرده‌اند. 

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

اما در نسخه 18 یک سری ویژگی‌های جدید اضافه شده است که بهتر است قبل از بررسی آن‌ها، به نسخه قدیمی‌تر یعنی React 17 پرداخته و آن را بهتر بشناسیم.

 

همه چیز در مورد React 17

تیم React به خوبی از این واقعیت آگاه است که بسیاری از کاربران در هر نسخه به‌روزرسانی شده، منتظر ویژگی‌های جدیدی هستند. فیس‌بوک در ۲۰ اکتبر ۲۰۲۰ آپدیت نسخه React را با نام React 17 منتشر کرد. با پیشی گرفتن React از Angular به عنوان دومین فریم‌ورک محبوب وب، React 17 نقطه عطف مهمی در این زمینه به شمار می‌آمد. 

اما توسعه‌دهندگان React در بیانیه‌ای اعلام کرد که هیچ ویژگی جدیدی در نسخه آپدیت شده React 17 وجود ندارد! به عبارت ساده، هیچ چیز جدیدی وجود نداشت که برای توسعه‌دهندگان ناشناخته و در عین حال کاربردی باشد. با این حال، نسخه جدید 17 بهینه‌سازی شده است تا با نسخه‌های بعدی React و با طیف گسترده‌تری از پکیج‌های جاوا اسکریپت که روی یک سند اجرا می‌شوند، سازگاری داشته باشد. 

در ادامه برخی از ویژگی‌های React 17 که البته در نسخه قبل آن نیز وجود داشته اما به شیوه‌ای جدید قابل پیاده‌سازی شده است، بیان خواهند شد.

 

پشتیبانی از به‌روزرسانی تدریجی

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

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

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

 

پشتیبانی از نسخه جدید JSX Transform

React 17 نسخه جدید و بازنویسی شده JSX Transform را پشتیبانی می‌کند، اگرچه ارتقاء به نسخه جدید JSX Transform کاملاً اختیاری است اما با دو مزیت عمده همراه است:

•    نیازی به وارد کردن کامپوننت‌ها به React وجود ندارد.
•    اندازه باندل‌های دریافتی از مخزن بهینه‌سازی شده است.

 

مدیریت انتشار سند

یکی از ویژگی‌های React 17 مدیریت انتشار سند است. همان‌طور که می‌دانید، ارتقا به نسخه جدید مشکلاتی در اجرا و انتشار سند ایجاد خواهد کرد. با این وجود، نسخه 17 این قابلیت را به کاربر می‌دهد که با استفاده از کد event.stopPropagation() بتواند انتشار سند خود را در فریم‌ورک React مدیریت کند و از انتشار خودکار آن پیش از رفع اشکالات جلوگیری نماید.

 

پشتیبانی از اپ‌های React تودرتو در یک سند HTML

در فریم‌ورک React هوک‌ها وظیفه اتصال به سند را بر عهده دارند تا پس از تأیید کاربر، منتشر شود. در نسخه 17 این فریم‌ورک، به جای اتصال هوک‌ها به سند، اپ React و فایل Root در آن به عنوان هدف هوک شناسایی می‌شود. این قابلیت باعث می‌شود که امکان پشتیبانی از چندین اپ React با ساختار پیچیده و تودرتو در یک سند HTML فراهم گردد.

 

سازگاری بیشتر تابع پاک‌سازی هوک

در نسخه جدید React 17، امکان استفاده و زمان‌بندی تابع پاک‌سازی هوک useEffect  به صورت مؤثرتر فراهم شده است. در نسخه 16 این فریم‌ورک، تابع پاک‌سازی به صورت همگام فعال‌سازی و اجرا می‌شد اما در نسخه 17 آن، امکان زمان‌بندی این تابع وجود دارد. به عنوان مثال در صورتی که کامپوننت مورد نظر هنوز درج نشده باشد، می‌توان تابع پاک‌سازی را به گونه‌ای زمان‌بندی کرد که پس از به‌روزرسانی اسکرین، این پاک‌سازی انجام شود.

 

مدیریت خطاهای undefined

در نسخه 16، توابعی که خطاهای undefined را نشان می‌دهند همیشه یک نوع خطا را شناسایی می‌کردند. در ابتدا، این ویژگی فقط مختص کامپوننت‌های کلاس و تابع بود، اما با ارائه نسخه 17، کامپوننت‌های ForwardRef و Memo نیز پشتیبانی شده و رفتار آن‌ها را با کامپوننت‌های کلاس و تابع سازگار شد. به این ترتیب تعداد خطاهای undefined پشتیبانی شده در این نسخه بیشتر شده و امکان تفکیک خطاها نیز برای توسعه‌دهنده فراهم گردید.

این تغییرات علی‌رغم قابلیت‌های جدیدی که برای کاربران React ایجاد کرده است اما چندان چشم‌گیر نیست و عملاً نسخه 17 در میان جامعه کاربران React به عنوان یک نسخه تکراری و بدون تغییرات شناخته می‌شود. اما نسخه 18 همان‌طور که پیش‌بینی می‌شد، یک سری ویژگی‌های جدید را ارائه کرده است که در ادامه به آن می‌پردازیم.

 

ویژگی‌های نسخه React 18 چیست؟

React 18 دارای ویژگی‌ها و به‌روزرسانی‌های هیجان‌انگیزی برای جامعه توسعه‌دهندگان React.js است. هدف همه به‌روزرسانی‌ها، حفظ کتابخانه‌های شخص ثالث با معرفی ویژگی‌ها و قابلیت‌های جدید خارج از چارچوب است.

ویژگی‌ها و قابلیت‌های جدید React 18 به لطف مکانیزم جدید «رندرینگ هم‌زمان» امکان‌پذیر شده است که React را قادر می‌سازد تا چندین نسخه از رابط کاربری (UI) را هم‌زمان ایجاد کند. اگرچه این تغییر بیشتر در پشت‌صحنه است، اما امکانات جدیدی را برای بهبود عملکرد برنامه به کاربر می‌دهد. در ادامه برخی از ویژگی‌های متمایز React 18 را بررسی می‌کنیم.

 

1.    معرفی Root API جدید

"root" یک اشاره‌گر یا pointer سطح بالا در ساختار داده است که توسط React برای ردیابی رندر درختی استفاده می‌شود. در API root قدیمی (ReactDOM.render)، root برای کاربران غیر شفاف بود، زیرا این اشاره‌گر مستقیماً به المان DOM متصل می‌شد و با استفاده از نود DOM بدون آنکه در معرض دید کاربر باشد، قابل‌دسترسی بود. 

با این حال، نیازی به ذخیره root در نود DOM در نسخه‌های قدیمی وجود نداشت. Root API در نسخه‌های قدیمی دارای مشکلاتی بود به عنوان مثال در هنگام انتقال برنامه و یا کد به مخزن، می‌بایست رندرگیری به صورت پیوسته انجام می‌شد، حتی اگر برنامه و یا کد تغییری نکرده باشد. 

اما با افزودن root API جدید در نسخه 18، این مشکل برطرف شده و در زمان انتقال به مخزن نیازی به رندرگیری وجود ندارد. همچنین تغییرات در root API به ما این امکان را می‌دهد که روش hydrate را حذف کرده و آن را با یک گزینه در root جایگزین کنیم، به طور مشابه، نحوه عملکرد رندر callback نیز تغییر کرده است. 

 

2.    بهبود دسته‌بندی (Batching) خودکار

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

این مشکل با اضافه کردن قابلیت دسته‌بندی خودکار در React 18 با استفاده از Root API حل شده است و اکنون همه به‌روزرسانی‌ها صرف‌نظر از منشأ آن‌ها به‌طور خودکار دسته‌بندی می‌شوند. علاوه بر این، می‌توان با استفاده از ReactDOM از دسته‌بندی انصراف داد.

 

3.    Start Transition API برای ریسپانسیو ماندن اپ 

یکی از مهم‌ترین به‌روزرسانی‌های React 18، معرفی startTransition API است که برنامه شما را حتی در زمان به‌روزرسانی‌های گسترده نیز ریسپانسیو نگه می‌دارد. گاهی اوقات در حین عملیات به‌روزرسانی سنگین، برنامه شما ریسپانسیو نخواهد بود، startTransition API می‌تواند برای مدیریت چنین موقعیت‌هایی بسیار مفید باشد.

 

4.    Suspense SSR جدید با توسعه ساختار معماری

React 18 یک ساختار معماری توسعه‌یافته به رندرینگ سمت سرور اضافه کرده است. رندر سمت سرور، سند HTML را از کامپوننت‌های react سمت سرور تولید کرده و آن را به کلاینت ارسال می‌کند، بنابراین کلاینت می‌تواند محتوای صفحه را قبل از بارگیری و اجرای بسته جاوا اسکریپت مشاهده و بررسی نماید. البته این ویژگی در نسخه جدید React با عنوان React Server Components شناخته می‌شود که در ادامه به معرفی آن می‌پردازیم.

 

                             

 

منظور از React Server Components چیست؟

React Server Component روشی برای نوشتن کامپوننت React در سمت سرور است که هدف آن بهبود عملکرد اپ React می‌باشد. یکی از مشکلاتی که هنگام توسعه برنامه‌ها و یا اپ‌ها با React با آن مواجه می‌شویم، تعداد زیاد درخواست‌های شبکه است که در فاصله زمانی انتظار کاربر برای دسترسی به داده و یا صفحه مورد نظر ارسال می‌شود.

برای بررسی این قابلیت بهتر است روش قدیمی‌تر را که پیش از ارائه React Server Component توسط فیس‌بوک استفاده می‌شد، بررسی کنیم. در استراتژی قدیمی‌تر، که با عنوان اپلیکیشن‌های تک‌صفحه‌ای (SPA) شناخته می‌شد، کاربر تنها می‌توانست یک بار صفحه HTML را فراخوانی کرده و با استفاده از جاوا اسکریپت آن را بررسی کرده و بارگذاری مجدد انجام دهد. 

عیب اصلی SPA این بود که توسط موتورهای جستجو به خوبی ایندکس نمی‌شد زیرا تنها یک فریم‌ورک HTML و بدون محتوا را فراخوانی می‌کرد که بعداً با کمک جاوا اسکریپت روی آن بارگذاری داده صورت می‌گرفت. برای حل این مسئله، مفهوم رندرینگ سمت سرور (SSR) مطرح شد. SSR همچنان نیز مورد استفاده قرار می‌گیرد و منظور از آن این است که اپلیکیشن‌های React به روشی ساده کامپوننت‌های رندرگیری شده را به صورت سندهای HTML برای کلاینت ارسال می‌کنند.

در نتیجه سرعت پاسخگویی اپ مورد نظر بیشتر خواهد شد. در این حالت کاربر تا زمانی که کد جاوا اسکریپت دانلود نشود، با اپ شما کاری نداشته و در نتیجه نیازی به انتظار کشیدن برای پاسخ سمت سرور نخواهد بود. اما React Server Components مفهوم جدیدتری است که با SSR تفاوت دارد. 

در این مفهوم، کامپوننت‌های سرور به صورت سند HTML رندرگیری نمی‌شوند بلکه به صورت یک فرمت خاص برای کلاینت ارسال می‌گردند. این فرمت در حال حاضر از استاندارد خاصی پیروی نمی‌کند اما به طور کلی شبیه فرمت JSON است. 

با معرفی ویژگی جدید React Server Components، امکان نوشتن کامپوننت‌های سرور برای اپ مورد نظر فراهم شد. این بدان معنی است که اپ‌ها، کامپوننت‌ها و dependeny های مربوط به آن در مرورگر اجرا نمی‌شوند و در نتیجه حجم کدهای جاوا اسکریپت که می‌بایست دانلود و اجرا شوند، کاهش می‌یابد. با این کار حجم باندل در اپ طراحی شده تا حدود 30% کمتر می‌شود. 

 

جمع‌بندی

فریم‌ورک React به عنوان یکی از پرمخاطب‌ترین فریم‌ورک‌های توسعه اپ شناخته می‌شود. نسخه جدید آن تحت عنوان React 18 اخیراً ارائه شده است و برخلاف نسخه 17 که تغییرات خاصی نداشت، ویژگی‌های جدید و کاربردی را در اختیار توسعه‌دهندگان قرار داده است. 

یکی از قابلیت‌های جالب‌توجه در نسخه 18، امکان توسعه کامپوننت‌های اپ در سمت سرور و ارسال آن با فرمتی خاص برای کلاینت است. در این صورت اندازه باندل کلاینت بر سرعت ارسال تأثیری نداشته و همچنین امکان مشاهده و نمایش استاتیکی اپلیکیشن با استفاده از کامپوننت‌های کلاینت فراهم می‌شود.

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