مقدمة إلى أحدث إصدار من React 18

16 أكتوبر 2024

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

تم تأكيد خطة الإصدار للنموذج القوي القادم من React 18 بمساعدة استخدام فريق React. والذي يجب أن يكون في النسخة التجريبية.

سنتحدث عن عدد من تحديثات الوظائف المتميزة لنموذج التفاعل 18 مع أمثلة التعليمات البرمجية في هذه المقالة.

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

يشير الجذر في React إلى شكل إحصائيات المرحلة العليا الذي يعرض شجرة. في React 18، يمكن أن يكون لدينا واجهتا برمجة تطبيقات جذريتان: واجهة برمجة تطبيقات الجذر القديمة وواجهة برمجة تطبيقات الجذر الجديدة تمامًا. 

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

واجهة برمجة التطبيقات الجذرية القديمة هي واجهة برمجة التطبيقات الحالية المعروفة باسم نهج ReactDOM.render. يشبه Legacy root API الاستخدام في نموذج التفاعل 17، حيث سينشئ جذرًا للمشي في الوضع القديم. قبل الغوص في التفاعل 18 للإنتاج، يمكن تقديم تحذير بشأن استخدام واجهة برمجة تطبيقات الجذر القديمة. سيتم تفعيل استخدام واجهة برمجة التطبيقات الجذرية الجديدة ببطء. يمكن إهمال واجهة برمجة التطبيقات الجذرية القديمة في الإصدارات القادمة.

يمكنك الرجوع إلى مثال الكود الموضح أدناه:

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

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

يمكنك الرجوع إلى الكود التالي

التغييرات في طريقة هيدرات

نهج التقديم ونهج الهيدرات متشابهان. لكنه يسمح بربط مستمعي الحدث بعوامل HTML داخل الصناديق التي يتم عرضها باستخدام نهج خادم ReactDOM على جانب الخادم. مع نهج جذر الهيدرات، يستبدل React 18 نهج الهيدرات هذا.

التغييرات في عرض رد الاتصال

من الجذر الجديد، تتم إزالة رد الاتصال الذي يعرض واجهة برمجة التطبيقات (API). ولكن يمكننا تمريرها كخاصية إلى المكون الجذر.

من الجذر الجديد، تتم إزالة رد الاتصال الذي يعرض واجهة برمجة التطبيقات (API).

تحسين في الخلط التلقائي

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

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

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

تعطيل الخلط التلقائي

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

تشويق

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

ستقوم React بتحميل JavaScript بالشكل التقليدي داخل المتصفح. بعد ذلك سيتم توصيل عناصر HTML التي تم إنشاؤها من الخادم بمنطق جافا سكريبت والترطيب.

يتيح لنا العرض من جانب الخادم (SSR) رؤية محتوى صفحة الويب قبل تجميع حزمة JavaScript وتشغيلها.

ستؤدي ميزة التشويق إلى تأخير عرض المكونات في التطوير الأصلي للرد الفعل. تم تقديمه لأول مرة في إصدار React 16.6 مع عوائق إيجابية ومساعدة بسيطة لعرض التشويق.

سيدعم الإصدار الثابت من React 18 ميزة التشويق الكاملة بناءً على الميزة المتزامنة، إلى جانب ما يلي:

• تأخر الانتقال: يعطي تعليمات للمكونات لانتظار حل البيانات قبل متابعة انتقال الحالة الجديدة.
• اختناق العنصر النائب: من خلال التحكم في مظهر العنصر النائب المتداخل ومكونات العنصر النائب المتعاقبة عن طريق تقليل اهتزاز واجهة المستخدم.
• SuspendList: يتم ترتيب المكونات بالترتيب الذي يجب أن يتم الكشف عن هذه المكونات به للمستخدم بواسطة SuspendList.

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

كان التشويق في React 16 و17 يسمى التشويق القديم سابقًا. يسمى التشويق المحسن في React 18 بالتشويق المتزامن.

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

فيما يلي مثال لشرح سهل للطرق التي سيعمل بها عامل التشويق داخل إصدارات رد الفعل 18 القديمة والجديدة:

• سوف يقوم التشويق القديم بتركيب العامل الشقيق على DOM دون تأخير. يمكن أيضًا تشغيل خطافات/نتائج دورة حياتها. لن يتم مراقبة حل المكون الذي تم تعليقه.
• بالمقارنة مع التشويق القديم، لن يؤدي التشويق المتزامن إلى تحميل العامل الشقيق في DOM، بالإضافة إلى ذلك لم يعد الآن يشعل خطافات/نتائج دورة حياته حتى يتم حل المكون الذي تم تعليقه. يمكن حل جميع المشاكل الحالية داخل التشويق القديم من خلال تلك التحسينات الجديدة.

العملة المتزامنة

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

في السابق، كانت كافة التحديثات لها نفس الأولوية، وكان من الممكن تحديث حالة مجموعة واحدة فقط. بداية الانتقال تساعد واجهة برمجة التطبيقات (API) ميزة التزامن الجديدة على وضع علامة على كافة التحديثات على أنها غير عاجلة. ستقوم React بمقاطعتها أو تعليقها، بناءً على الأولوية المحددة.

خاتمة

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