کاوش در React 19: ویژگی ها، منسوخ شدن ها، و تغییرات شکسته

Summarize this content to 400 words in Persian Lang
React 19 اینجاست و مجموعه ای از ویژگی ها، پیشرفت ها و تغییرات جدید را به ارمغان می آورد. این نسخه نحوه مدیریت حالت، فرمها و رندر سمت سرور را در حالی که APIهای قدیمی را منسوخ میکنند، دوباره تعریف میکند. اگر قصد ارتقا دارید، برای یک سفر متحول کننده دست و پنجه نرم کنید. این راهنما شما را با نکات برجسته React 19 همراه با نکاتی برای اطمینان از انتقال روان آشنا می کند.
نکات برجسته React 19
ویژگی های جدید
1. اقدامات و useActionState
را startTransition API اکنون از توابع async پشتیبانی می کند که به آنها “اقدامات” گفته می شود. کنشها میتوانند بهروزرسانیهای حالت را مدیریت کنند، عوارض جانبی مانند fetch()و شامل رسیدگی به خطا می شود. آنها انتقالها را با بهروزرسانیهای حالت هماهنگ و رندر رابط کاربری ساده میکنند.
جدید useActionState قلاب این را با ارائه دسترسی به وضعیتهای اقدام، از جمله حالتهای در حال انتظار و نهایی، تکمیل میکند. این یک کاهنده برای کنترل دانه ای می پذیرد، و آن را به یک ابزار ضروری برای تعاملات شکل و جریان های حالت پیچیده تبدیل می کند.
2. به روز رسانی خوش بینانه با useOptimistic
useOptimistic توسعه دهندگان را قادر می سازد تا تغییرات حالت موقت را در حالی که یک انتقال در حال انجام است تنظیم کنند و تجربه کاربری روان تری را ارائه دهند. پس از پایان عملیات همگام سازی، وضعیت به طور خودکار برمی گردد یا به روز می شود.
3. use API
React 19 را معرفی می کند use API، که اجازه می دهد وعده ها یا زمینه ها در حین رندر خوانده شوند. این میتواند جریانهای کاری واکشی دادههای سرور را ساده کند، اما با محدودیتی همراه است use فقط در یک تابع render فراخوانی می شود.
4. ref به عنوان یک تکیه گاه
اکنون میتوانید داورها را مستقیماً به عنوان ابزار ارسال کنید و نیازی به استفاده از آن را از بین ببرید forwardRef. این تغییر ترکیب اجزا را ساده می کند و کار با ref ها را شهودی تر می کند.
5. تعلیق بهبود یافته
تعلیق در حال حاضر پشتیبانی می کند پیش گرم شدن خواهر و برادر، که با تعلیق یکی از خواهر و برادرها بلافاصله اجزای بازگشتی را متعهد می کند. این بهبود عملکرد و تجربه کاربر را در برنامه های کاربردی با داده های سنگین افزایش می دهد.
React DOM Client Enhances
1. فرم اقدامات
فرمها در React هوشمندتر هستند action props, enabling better integration with useFormStatus. ارسال فرم به طور خودکار وضعیت آن را برای اجزای کنترل نشده بازنشانی می کند.
2. فراداده سند و بهینه سازی منابع
React 19 به طور بومی از ارائه ابرداده سند، مانند یا برچسب ها، در درخت جزء. علاوه بر این، API های جدید مانند preinit، preload، و preconnect بهبود زمان کشف منابع و بارگذاری
3. اسکریپت های همگام
اکنون می توانید اسکریپت های ناهمگام را در هر نقطه از درخت مؤلفه رندر کنید. React سفارش و کپی برداری را انجام می دهد و ادغام اسکریپت شخص ثالث را ساده می کند.
سرور DOM React
1. APIهای Prerender جدید
را prerender و prerenderToNodeStream API ها رندر سمت سرور (SSR) را با پشتیبانی از محیط های جریانی مانند Node.js بهبود می بخشند. این APIها قبل از تولید HTML منتظر بارگیری داده ها هستند و SSR را قوی تر می کند.
2. مؤلفههای سرور واکنش پایدار (RSC)
اجزای سرور در حال حاضر پایدار هستند و به کتابخانه ها اجازه می دهد تا React 19 را به عنوان یک وابستگی همتا مورد هدف قرار دهند. این با معماری Full-stack React مطابقت دارد و یکپارچه سازی یکپارچه با چارچوب هایی مانند Next.js را امکان پذیر می کند.
انکار و شکستن تغییرات
تحقیرها
element.ref دسترسی داشته باشید: منسوخ به نفع element.props.ref.
react-test-renderer: هشدارهای انحراف را ثبت می کند. مهاجرت به کتابخانه تست React را در نظر بگیرید.
APIهای قدیمی: API ها مانند contextTypes، defaultProps برای توابع، و ref های رشته ای رسماً منسوخ شده اند.
شکستن تغییرات
JSX Transform Requiredتبدیل جدید JSX در React 19 اجباری است. این ویژگیهایی مانند refs را به عنوان پایه فعال میکند و عملکرد کلی را بهبود میبخشد.
تغییرات مدیریت خطاخطاهای کشف نشده اکنون به گزارش شده است window.reportError، در حالی که خطاهای شناسایی شده توسط مرزها از طریق ثبت می شوند console.error. روش های جدید مانند onUncaughtError و onCaughtError اجازه سفارشی سازی را می دهد.
API های حذف شده
ReactDOM.render و ReactDOM.hydrate: جایگزین شد ReactDOM.createRoot و ReactDOM.hydrateRoot.
defaultProps برای توابع: به جای آن از پارامترهای پیش فرض ES6 استفاده کنید.
بافت میراث: از مدرن استفاده کنید contextType API.
react-dom/test-utils: با act از هسته React.
ساختهای UMD حذف شدندساختهای UMD دیگر پشتیبانی نمیشوند. از CDN های مبتنی بر ESM برای استفاده از تگ اسکریپت مانند esm.sh استفاده کنید.
آماده شدن برای ارتقا
1. ابتدا به React 18.3 ارتقا دهید
React 18.3 برای API های حذف شده در React 19 هشدارهای انحلال معرفی می کند. این مرحله میانی به شناسایی مشکلات احتمالی قبل از ارتقای کامل کمک می کند.
2. کدمودها و ابزارهای مهاجرت
از کدهای React برای خودکارسازی بهروزرسانیهای تکراری، مانند بازآفرینی APIهای منسوخ شده و تنظیم انواع TypeScript استفاده کنید.
3. تنظیمات TypeScript
React 19 شامل تایپهای سختگیرانهتر TypeScript است. به عنوان مثال:
ReactChild → React.ReactElement | number | string
VoidFunctionComponent → FunctionComponent
کد خود را مجدداً تغییر دهید تا با این بهروزرسانیها هماهنگ شود.
نکاتی برای انتقال روان
از حالت سختگیرانه استفاده کنید: React 19 اجرای دقیقتر بهترین شیوهها را معرفی میکند. اجرای برنامه در حالت سختگیرانه می تواند باگ های پنهان را آشکار کند.
آزمایش زودهنگام و اغلب: با توجه به تغییرات شکستن، آزمایش کامل بسیار مهم است. در حال انتقال از react-test-renderer به React Testing Library سازگاری با رندر همزمان را تضمین می کند.
بررسی رندر سرور: اگر برنامه شما از SSR استفاده میکند، با APIهای پیشاجرای جدید React 19 آزمایش کنید و از ادغام نرم اجزای سرور اطمینان حاصل کنید.
چرا واکنش 19 مهم است
React 19 یک جهش قابل توجه به جلو است که تجربه توسعه دهندگان را بهبود می بخشد و در عین حال قابلیت های قدرتمندی را برای برنامه های مدرن فراهم می کند. چه در مورد اقدامات ناهمگام، بهبود تعلیق، یا بهبودهای رندر سمت سرور هیجان زده باشید، این نسخه دارای ویژگی هایی است که به توسعه دهندگان کمک می کند تا برنامه های سریع تر و انعطاف پذیرتر بسازند.
آماده شیرجه رفتن هستید؟ با React 19 Upgrade Guide شروع کنید و یادداشتهای انتشار کامل را بررسی کنید.
کد نویسی مبارک! 🚀
React 19 اینجاست و مجموعه ای از ویژگی ها، پیشرفت ها و تغییرات جدید را به ارمغان می آورد. این نسخه نحوه مدیریت حالت، فرمها و رندر سمت سرور را در حالی که APIهای قدیمی را منسوخ میکنند، دوباره تعریف میکند. اگر قصد ارتقا دارید، برای یک سفر متحول کننده دست و پنجه نرم کنید. این راهنما شما را با نکات برجسته React 19 همراه با نکاتی برای اطمینان از انتقال روان آشنا می کند.
نکات برجسته React 19
ویژگی های جدید
1. اقدامات و useActionState
را startTransition
API اکنون از توابع async پشتیبانی می کند که به آنها “اقدامات” گفته می شود. کنشها میتوانند بهروزرسانیهای حالت را مدیریت کنند، عوارض جانبی مانند fetch()
و شامل رسیدگی به خطا می شود. آنها انتقالها را با بهروزرسانیهای حالت هماهنگ و رندر رابط کاربری ساده میکنند.
جدید useActionState
قلاب این را با ارائه دسترسی به وضعیتهای اقدام، از جمله حالتهای در حال انتظار و نهایی، تکمیل میکند. این یک کاهنده برای کنترل دانه ای می پذیرد، و آن را به یک ابزار ضروری برای تعاملات شکل و جریان های حالت پیچیده تبدیل می کند.
2. به روز رسانی خوش بینانه با useOptimistic
useOptimistic
توسعه دهندگان را قادر می سازد تا تغییرات حالت موقت را در حالی که یک انتقال در حال انجام است تنظیم کنند و تجربه کاربری روان تری را ارائه دهند. پس از پایان عملیات همگام سازی، وضعیت به طور خودکار برمی گردد یا به روز می شود.
3. use
API
React 19 را معرفی می کند use
API، که اجازه می دهد وعده ها یا زمینه ها در حین رندر خوانده شوند. این میتواند جریانهای کاری واکشی دادههای سرور را ساده کند، اما با محدودیتی همراه است use
فقط در یک تابع render فراخوانی می شود.
4. ref
به عنوان یک تکیه گاه
اکنون میتوانید داورها را مستقیماً به عنوان ابزار ارسال کنید و نیازی به استفاده از آن را از بین ببرید forwardRef
. این تغییر ترکیب اجزا را ساده می کند و کار با ref ها را شهودی تر می کند.
5. تعلیق بهبود یافته
تعلیق در حال حاضر پشتیبانی می کند پیش گرم شدن خواهر و برادر، که با تعلیق یکی از خواهر و برادرها بلافاصله اجزای بازگشتی را متعهد می کند. این بهبود عملکرد و تجربه کاربر را در برنامه های کاربردی با داده های سنگین افزایش می دهد.
React DOM Client Enhances
1. فرم اقدامات
فرمها در React هوشمندتر هستند action props, enabling better integration with
useFormStatus
. ارسال فرم به طور خودکار وضعیت آن را برای اجزای کنترل نشده بازنشانی می کند.
2. فراداده سند و بهینه سازی منابع
React 19 به طور بومی از ارائه ابرداده سند، مانند
یا برچسب ها، در درخت جزء. علاوه بر این، API های جدید مانند
preinit
، preload
، و preconnect
بهبود زمان کشف منابع و بارگذاری
3. اسکریپت های همگام
اکنون می توانید اسکریپت های ناهمگام را در هر نقطه از درخت مؤلفه رندر کنید. React سفارش و کپی برداری را انجام می دهد و ادغام اسکریپت شخص ثالث را ساده می کند.
سرور DOM React
1. APIهای Prerender جدید
را prerender
و prerenderToNodeStream
API ها رندر سمت سرور (SSR) را با پشتیبانی از محیط های جریانی مانند Node.js بهبود می بخشند. این APIها قبل از تولید HTML منتظر بارگیری داده ها هستند و SSR را قوی تر می کند.
2. مؤلفههای سرور واکنش پایدار (RSC)
اجزای سرور در حال حاضر پایدار هستند و به کتابخانه ها اجازه می دهد تا React 19 را به عنوان یک وابستگی همتا مورد هدف قرار دهند. این با معماری Full-stack React مطابقت دارد و یکپارچه سازی یکپارچه با چارچوب هایی مانند Next.js را امکان پذیر می کند.
انکار و شکستن تغییرات
تحقیرها
-
element.ref
دسترسی داشته باشید: منسوخ به نفعelement.props.ref
. -
react-test-renderer
: هشدارهای انحراف را ثبت می کند. مهاجرت به کتابخانه تست React را در نظر بگیرید. -
APIهای قدیمی: API ها مانند
contextTypes
،defaultProps
برای توابع، و ref های رشته ای رسماً منسوخ شده اند.
شکستن تغییرات
-
JSX Transform Required
تبدیل جدید JSX در React 19 اجباری است. این ویژگیهایی مانند refs را به عنوان پایه فعال میکند و عملکرد کلی را بهبود میبخشد. -
تغییرات مدیریت خطا
خطاهای کشف نشده اکنون به گزارش شده استwindow.reportError
، در حالی که خطاهای شناسایی شده توسط مرزها از طریق ثبت می شوندconsole.error
. روش های جدید مانندonUncaughtError
وonCaughtError
اجازه سفارشی سازی را می دهد. -
API های حذف شده
-
ReactDOM.render
وReactDOM.hydrate
: جایگزین شدReactDOM.createRoot
وReactDOM.hydrateRoot
. -
defaultProps
برای توابع: به جای آن از پارامترهای پیش فرض ES6 استفاده کنید. -
بافت میراث: از مدرن استفاده کنید
contextType
API. -
react-dom/test-utils
: باact
از هسته React.
-
-
ساختهای UMD حذف شدند
ساختهای UMD دیگر پشتیبانی نمیشوند. از CDN های مبتنی بر ESM برای استفاده از تگ اسکریپت مانند esm.sh استفاده کنید.
آماده شدن برای ارتقا
1. ابتدا به React 18.3 ارتقا دهید
React 18.3 برای API های حذف شده در React 19 هشدارهای انحلال معرفی می کند. این مرحله میانی به شناسایی مشکلات احتمالی قبل از ارتقای کامل کمک می کند.
2. کدمودها و ابزارهای مهاجرت
از کدهای React برای خودکارسازی بهروزرسانیهای تکراری، مانند بازآفرینی APIهای منسوخ شده و تنظیم انواع TypeScript استفاده کنید.
3. تنظیمات TypeScript
React 19 شامل تایپهای سختگیرانهتر TypeScript است. به عنوان مثال:
-
ReactChild
→React.ReactElement | number | string
-
VoidFunctionComponent
→FunctionComponent
کد خود را مجدداً تغییر دهید تا با این بهروزرسانیها هماهنگ شود.
نکاتی برای انتقال روان
- از حالت سختگیرانه استفاده کنید: React 19 اجرای دقیقتر بهترین شیوهها را معرفی میکند. اجرای برنامه در حالت سختگیرانه می تواند باگ های پنهان را آشکار کند.
-
آزمایش زودهنگام و اغلب: با توجه به تغییرات شکستن، آزمایش کامل بسیار مهم است. در حال انتقال از
react-test-renderer
به React Testing Library سازگاری با رندر همزمان را تضمین می کند. - بررسی رندر سرور: اگر برنامه شما از SSR استفاده میکند، با APIهای پیشاجرای جدید React 19 آزمایش کنید و از ادغام نرم اجزای سرور اطمینان حاصل کنید.
چرا واکنش 19 مهم است
React 19 یک جهش قابل توجه به جلو است که تجربه توسعه دهندگان را بهبود می بخشد و در عین حال قابلیت های قدرتمندی را برای برنامه های مدرن فراهم می کند. چه در مورد اقدامات ناهمگام، بهبود تعلیق، یا بهبودهای رندر سمت سرور هیجان زده باشید، این نسخه دارای ویژگی هایی است که به توسعه دهندگان کمک می کند تا برنامه های سریع تر و انعطاف پذیرتر بسازند.
آماده شیرجه رفتن هستید؟ با React 19 Upgrade Guide شروع کنید و یادداشتهای انتشار کامل را بررسی کنید.
کد نویسی مبارک! 🚀