هل تفكر في تجربة البرمجة باستخدام React؟ إليك بعض الميزات الجديدة الرئيسية لتجربتها في React 18.

React هي مكتبة JavaScript مفتوحة المصدر شائعة جدًا أنشأها Facebook في عام 2013. نظرًا لمرونته ، يستخدم الكثير من المطورين بعض ميزاته في بناء مكونات واجهة مستخدم (UI) سريعة وفعالة وقابلة لإعادة الاستخدام.

في مارس 2022 ، أطلق الفريق الإصدار الأحدث والمتوقع من مكتبة React ، React 18 ، والذي يتضمن ميزات جديدة تركز على تحسين أداء التطبيق.

الميزات الجديدة في React 18

يتكون React 18 من بعض الميزات الجديدة المفيدة المضافة إلى ملف مكتبة JavaScript مفتوحة المصدر. لم تكن العديد من هذه التغييرات في الإصدار السابق بينما تم تحسين الميزات الأخرى. بعض هذه الميزات تشمل ؛ واجهة برمجة تطبيقات جذرية جديدة ، ودمج تلقائي ، وواجهة برمجة تطبيقات انتقالية ، وواجهة برمجة تطبيقات للتعليق ، وإصدار خطافات جديدة.

واجهة برمجة تطبيقات الجذر الجديدة

تتعقب واجهة برمجة تطبيقات الجذر في React كيفية عرض مكوِّن المستوى الأعلى في الشجرة. في الإصدارات السابقة من React ، كان ملف يجعل تم استخدام طريقة لتنفيذ العرض والتي تسمى الآن واجهة برمجة تطبيقات الجذر القديمة.

instagram viewer

ومع ذلك ، يأتي React 18 مع واجهة برمجة تطبيقات جذرية جديدة تُنشئ جذرًا باستخدام امتداد إنشاء الجذر ثم يعرض مكون React إلى الجذر المُنشأ باستخدام الامتداد يجعل طريقة.

ستمنحك واجهة برمجة تطبيقات الجذر الجديدة هذه إمكانية الوصول إلى الميزات الموجودة في هذا الإصدار الأخير مثل ميزة الانتقال لواجهة برمجة التطبيقات التي تمت مناقشتها لاحقًا. في حين أن الطريقة القديمة ستظل تعمل في React 18 ، فقد يتم التخلص منها تدريجيًا في المستقبل.

يوضح المقتطف أدناه كيفية هيكلة واجهة برمجة تطبيقات الجذر بالطرق القديمة والجديدة.

Legacy Root API

يستورد رد فعل من"رد فعل دوم";
يستورد برنامج من'./برنامج';
ReactDOM.render (<برنامج />, وثيقة.getElementById ('برنامج'))

واجهة برمجة تطبيقات الجذر الجديدة

يستورد رد فعل من"رد فعل دوم / العميل";
يستورد برنامج من'./برنامج';
مقدار ثابت الجذر = ReactDOM.createRoot (وثيقة.getElementById ('برنامج'));
root.render (<برنامج />)

التجميع التلقائي

يتضمن التجميع في React تحديثات متعددة للحالة في إعادة تصيير واحدة في كل حدث متصفح على سبيل المثال انقر فوق الحدث. لن يتم تجميع أي تغييرات حالة حدثت خارج حدث مثل الوعد أو رد الاتصال.

باستخدام React 18 ، يتم إجراء تحديثات حالة التجميع تلقائيًا بغض النظر عن مكان حدوث هذه التحديثات. توفر هذه الميزة تحسينًا خارج الصندوق في الأداء ووقت العرض. ومع ذلك ، إذا كانت لديك حالة مكون لا تريد تجميعها ، فيمكنك إلغاء الاشتراك فيها باستخدام ملف تدفق المزامنة طريقة. يوجد أدناه نموذج مقتطف حول كيفية القيام بذلك ؛

يستورد {flushSync} من"رد فعل دوم";
وظيفةمقبض() {
 flushSync (() => {
 setCount (عدد => العد + 1);
]});
 flushSync (() => {
 setStore (محل => !محل)؛
});
}

الانتقال API

في React ، يمكن تصنيف التحديثات التي تم إجراؤها في واجهة المستخدم على أنها تحديثات عاجلة وتحديثات انتقالية تسمى أيضًا التحديثات غير العاجلة. مثال على التحديث العاجل يمكن أن يكون حالة إدخال نص في حقل بينما يمكن أن يكون التحديث الخاص بالتحديث هو وظيفة تصفية البحث.

الآن ، في حالة حدوث مثل هذه التحديثات في وقت واحد ، يمكن أن يسمى هذا عملية ثقيلة ويمكن أن يؤدي إلى تجميد التطبيق الخاص بك. لحل هذه المشكلة ، هذا هو المكان الذي يسمى فيه الانتقال API ملف بدء الانتقال يأتي للعب. تخبر هذه الميزة الجديدة React بالتحديثات التي يجب تمييزها على أنها "انتقالات" بدورها تعمل على تحسين تفاعلات المستخدم. فيما يلي عينة من التعليمات البرمجية لكيفية عملها ؛

يستورد {startTransition} من"تتفاعل";
startTransition (() => {
 setSearch (الإدخال) ؛
});

تشويق

عندما يتم عرض تطبيق على الخادم ، يتم إرجاع ملف HTML ثابت إلى المتصفح مما يسمح للمستخدم بمعرفة كيف يبدو التطبيق أثناء تحميل JavaScript. عندما يتم تحميل الملف ، يصبح HTML ديناميكيًا بما يعرف بـ ترطيب. النقص هنا هو أنه إذا لم يتم تطبيق كل هذه العناصر ، فلن يصبح تطبيقك تفاعليًا.

لحل هذه المشكلة ، يوفر React 18 ميزتين جديدتين لعرض جانب الخادم (SSR) باستخدام تشويق عنصر؛

  • يسمح دفق HTML بإرسال أجزاء من المكون عند تقديمها.
  • يعطي الترطيب الانتقائي الأولوية لتفاعل المكونات التي يختارها المستخدم.

خطاف جديد

كانت إحدى نقاط التحول الكبيرة في React هي تقديم الخطافات في React الإصدار 16 الذي يسمح لمكونات الوظيفة بالوصول إلى الحالات وميزات React الأخرى دون كتابة فئات. يشحن React 18 بخمس خطافات جديدة لتحسين تجربة المطورين ؛

  • useId: يسمح لنا هذا الخطاف بإنشاء معرف فريد (ID) في تطبيقنا على كل من الخادم والعميل.
  • useTransition: يتم استخدامه جنبًا إلى جنب بدء الانتقال لإنشاء تحديث حالة جديد يمكن وصفه بأنه غير عاجل.
  • useDefferedValue: يسمح بتأجيل التحديثات الأقل إلحاحًا.
  • useSyncExternalStore: هذا الخطاف مفيد عند تنفيذ الاشتراكات في مصادر البيانات الخارجية.
  • useInsertionEffect: يقتصر هذا الخطاف على مؤلفي مكتبة CSS-in-JS لحقن الأنماط في DOM.

كيفية التحديث إلى React 18

لإجراء تحديث ، يمكن استخدام مدير حزمة npm أو yarn عن طريق تشغيل الأمر التالي في الجهاز.

npm ثَبَّتَ رد فعل رد دوم

أو

إضافة غزل يتفاعل رد فعل دوم

بعد ذلك ، ستحتاج إلى إجراء تغيير على ملف index.js ملف في الدليل الجذر لمجلد المشروع من واجهة برمجة التطبيقات القديمة إلى واجهة برمجة تطبيقات الجذر الجديدة كما هو موضح سابقًا.

كيفية إعداد مشروع React 18 جديد

لإعداد مشروع React 18 جديد ، يتم تثبيت حزمة create-reaction-app مع npm أو الغزل في الجهاز ؛

npx يخلقرد فعل التطبيق بلدي رد الفعل التطبيق

أو

إضافة الغزل يخلقرد فعل التطبيق بلدي رد الفعل التطبيق

حسِّن أداء تطبيقك باستخدام React 18

أنت الآن تعرف بعض الميزات الجديدة في React 18 مثل واجهة برمجة تطبيقات الجذر الجديدة أو Suspense أو Transition أو Automatic Batching ، وكيفية الترقية إلى هذا الإصدار الجديد وإعداده من البداية.

هذه التغييرات الأخيرة على React جاهزة لتجربتها الآن.