آخرین نسخه React افزوده‌های زیادی دارد و این چهار می‌توانند تفاوت عمده‌ای در برنامه‌نویسی روزمره شما ایجاد کنند.
React v18 که مدت ها مورد انتظار بود بالاخره چند ماه پیش عرضه شد. اگرچه هیچ تغییر عمده ای وجود نداشت، اما ویژگی های جالبی به آن اضافه شد که ارزش دیدن را دارد. این مقاله به برخی از موارد اضافه شده جدید و نحوه ارتقاء به React v18 می پردازد.
نحوه ارتقا به React 18
برای نصب آخرین نسخه React این دستور را در ترمینال اجرا کنید:
npm install react react-dom
یا اگر از نخ استفاده می کنید:
yarn add react react-dom
هنگامی که آخرین نسخه را نصب کردید، می توانید از ویژگی های جدید آن استفاده کنید.
چندین افزودنی در React 18 وجود دارد. در اینجا چهار مورد از قابل توجه ترین آنها وجود دارد.
1. حالت سخت
StrictMode یک ویژگی است که می توانید از آن برای برجسته کردن مشکلات احتمالی در یک برنامه استفاده کنید. بررسی حالت دقیق فقط در حالت توسعه اجرا می شود و بر ساخت تولید تأثیری نخواهد داشت. با این حال، آنها می توانند در شناسایی مشکلات احتمالی در کد شما بسیار مفید باشند.
شما می توانید حالت سخت را برای هر بخشی از برنامه خود فعال کنید. به عنوان مثال، می توانید آن را برای همه اجزای خود یا فقط برای برخی از آنها فعال کنید.
import React from 'react';
function DemoExample() {
return (
<div>
<FirstComponent />
<React.StrictMode>
<SecondComponent />
<ThirdComponent />
</React.StrictMode>
<FourthComponent />
</div>
);
}
در کد بالا، هر چهار مؤلفه برای مشکلات احتمالی بررسی می شوند. با این حال، بررسی حالت دقیق فقط برای
StrictMode به روش های دیگری نیز کمک می کند، مانند:
- شناسایی اجزای دارای چرخه عمر ناامن: اگر یک جزء دارای روش چرخه عمر است که به عنوان ناایمن علامت گذاری شده است، حالت سخت به شما در مورد آن هشدار می دهد.
- هشدار در مورد استفاده از API رشته ref legacy: اگر از API ref string قدیمی استفاده می کنید، حالت سخت به شما در مورد استفاده از آن هشدار می دهد.
- هشدار در مورد استفاده منسوخ شده findDOMNode: اگر از API منسوخ findDOMNode استفاده می کنید، حالت سخت به شما در مورد آن هشدار می دهد.
- تشخیص عوارض جانبی غیرمنتظره: اگر یک جزء در مکان‌های غیرمنتظره عوارض جانبی (مانند setState) ایجاد کند، حالت سخت به شما در مورد آن هشدار می‌دهد.
- تشخیص API بافت قدیمی: اگر از API بافت قدیمی استفاده می کنید (که اکنون منسوخ شده است)، حالت سخت به شما در مورد آن هشدار می دهد.
- اطمینان از حالت قابل استفاده مجدد: اگر حالتی دارید که توسط چندین مؤلفه استفاده می شود، حالت سخت به اطمینان از همگام سازی صحیح آن کمک می کند.
به طور کلی، حالت سخت می تواند یک ویژگی مفید در توسعه برای کمک به شناسایی مشکلات احتمالی در کد شما باشد.
2. انتقال
انتقال به شما امکان می‌دهد به‌روزرسانی‌های رابط کاربری خاص را به‌عنوان غیر فوری علامت‌گذاری کنید. این بدان معناست که React می‌تواند به‌روزرسانی‌های دیگری را که مهم‌تر هستند اولویت‌بندی کند.
به عنوان مثال، اگر دو فیلد متنی دارید – یکی برای یک عبارت جستجو و دیگری برای نتایج آن – می‌خواهید فیلد متنی نتایج جستجو را به عنوان انتقال علامت‌گذاری کنید. به این ترتیب، React می‌داند که نیازی نیست هر بار که کاربر چیزی را در قسمت متن جستجوی جستجو تایپ می‌کند، فوراً آن فیلد متنی را دوباره ارائه کند.
می توانید از تابع startTransition برای علامت گذاری به روز رسانی رابط کاربری به عنوان انتقال استفاده کنید. در اینجا یک مثال است:
import { startTransition } from 'react';
startTransition(() => {
// Mark any non-urgent state updates inside as transitions
});
این کد تمام به‌روزرسانی‌های حالت داخل تابع startTransition را به‌عنوان انتقال علامت‌گذاری می‌کند. به این ترتیب، React می‌تواند روی دیگر به‌روزرسانی‌های مهم‌تر رابط کاربری تمرکز کند.
3. دسته بندی خودکار
React یک ویژگی مفید به نام دسته‌بندی ارائه می‌کند که تعداد رندرهایی را که هنگام تغییر حالت انجام می‌شوند کاهش می‌دهد. این می تواند در بهینه سازی عملکرد، به ویژه هنگام کار با کدهای ناهمزمان، بسیار مفید باشد.
قبلاً، اگر قولی می‌دادید یا در حال برقراری تماس شبکه بودید، به‌روزرسانی‌های حالت دسته‌بندی نمی‌شدند و React باید چندین بار رندر می‌شد. با این حال، با دسته‌بندی خودکار در React 18، همه به‌روزرسانی‌های حالت، حتی در وعده‌ها، setTimeouts و تماس‌های رویداد، دسته‌بندی می‌شوند. این کار به میزان قابل توجهی کارهایی را که React باید در پس‌زمینه انجام دهد کاهش می‌دهد.
با استفاده از تابع flushSync می‌توانید به‌روزرسانی‌های حالت دسته‌ای را به صورت دستی انجام دهید، اما از React 18، این فرآیند اکنون خودکار است. این منجر به عملکرد بسیار بهتری می‌شود، زیرا React قبل از رندر کردن مجدد منتظر می‌ماند تا یک وظیفه کوچک به پایان برسد.
4. هوک های جدید
نسخه 18 بسیاری از هوک های React جدید از جمله useId، useTransition و useDeferredValue را معرفی می کند. این هوک‌های جدید راهی عالی برای افزودن قابلیت‌های اضافی به برنامه‌های React شما با حداقل تلاش ارائه می‌کنند.
React 18 عملکرد برنامه را افزایش می دهد
React 18 اینجاست، و بهبودهای بزرگی را در عملکرد برنامه های وب به همراه دارد. با نسخه جدید React، می توانید به راحتی برنامه های وب ایجاد کنید که واکنش گراتر هستند و در کل عملکرد بهتری دارند. بنابراین اگر به دنبال ایجاد یک برنامه وب هستید که به آرامی اجرا شود و عالی به نظر برسد، حتما React 18 را بررسی کنید.