مخارج الطوارئ

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

الرجوع إلى القيم باستخدام المراجع

عندما تريد أن "يتذكر" المكون بعض المعلومات، ولكنك لا تريد أن تؤدي هذه المعلومات إلىإطلاق عمليات تصيير جديدة، يمكنك استخداممرجع:

مثل الحالة، تحتفظ React بالمراجع بين عمليات إعادة التصيير. ومع ذلك، فإن تعيين الحالة يعيد تصيير المكون. تغيير المرجع لا يفعل ذلك! يمكنك الوصول إلى القيمة الحالية لذلك المرجع من خلال الخاصيةref.current.

المرجع يشبه جيبًا سريًا لمكونك لا تتعقبه React. على سبيل المثال، يمكنك استخدام المراجع لتخزينمعرفات المهلات، وعناصر DOM، وكائنات أخرى لا تؤثر على ناتج تصيير المكون.

التلاعب بـ DOM باستخدام المراجع

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

المزامنة مع التأثيرات

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

اضغط على تشغيل/إيقاف عدة مرات وشاهد كيف يظل مشغل الفيديو متزامنًا مع قيمة الخاصيةisPlaying:

كثير من التأثيرات أيضًا "تنظف" بعد نفسها. على سبيل المثال، التأثير الذي ينشئ اتصالاً بخادم دردشة يجب أن يُرجعدالة تنظيفتخبر React بكيفية فصل مكونك عن ذلك الخادم:

في وضع التطوير، سيقوم React بتشغيل وتنظيف تأثيرك مرة إضافية فورًا. هذا هو سبب رؤيتك لـ"✅ Connecting..."مطبوعًا مرتين. هذا يضمن ألا تنسى تنفيذ دالة التنظيف.

قد لا تحتاج إلى تأثير

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

هناك حالتان شائعتان لا تحتاج فيهما إلى تأثيرات:

• لا تحتاج إلى تأثيرات لتحويل البيانات من أجل العرض.
• لا تحتاج إلى تأثيرات للتعامل مع أحداث المستخدم.

على سبيل المثال، لا تحتاج إلى تأثير لضبط بعض الحالة بناءً على حالة أخرى:

بدلاً من ذلك، احسب قدر الإمكان أثناء العرض:

ومع ذلك، أنتتحتاجإلى تأثيرات للمزامنة مع الأنظمة الخارجية.

دورة حياة التأثيرات التفاعلية

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

يعتمد هذا التأثير على قيمة الخاصيةroomId. الخصائص هيقيم تفاعلية،مما يعني أنها يمكن أن تتغير عند إعادة العرض. لاحظ أن التأثيريعيد المزامنة(ويعيد الاتصال بالخادم) إذا تغيرroomId:

يوفر React قاعدة مدقق (linter) للتحقق من أنك حددت تبعيات تأثيرك بشكل صحيح. إذا نسيت تحديدroomIdفي قائمة التبعيات في المثال أعلاه، سيكتشف المدقق هذا الخطأ تلقائيًا.

فصل الأحداث عن التأثيرات

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

جميع التعليمات البرمجية داخل التأثيرات هيتفاعلية.ستعمل مرة أخرى إذا تغيرت بعض القيمة التفاعلية التي تقرأها بسبب إعادة العرض. على سبيل المثال، سيعيد هذا التأثير الاتصال بالدردشة إذا تغيرتroomIdأوtheme:

هذا ليس مثاليًا. أنت تريد إعادة الاتصال بالدردشة فقط إذا تغيرتroomId. تغيير themeلا ينبغي أن يعيد الاتصال بالدردشة! انقل التعليمات البرمجية التي تقرأthemeخارج تأثيرك إلىحدث تأثير:

التعليمات البرمجية داخل أحداث التأثير ليست تفاعلية، لذا فإن تغييرthemeلم يعد يجعل تأثيرك يعيد الاتصال.

إزالة تبعيات التأثير

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

على سبيل المثال، يعتمد هذا التأثير على كائنoptionsالذي يعاد إنشاؤه في كل مرة تقوم فيها بتحرير الإدخال:

لا تريد أن يعيد الدردشة الاتصال في كل مرة تبدأ فيها بكتابة رسالة في تلك الدردشة. لإصلاح هذه المشكلة، انقل إنشاء كائنoptionsداخل الـ Effect بحيث يعتمد الـ Effect فقط على سلسلةroomId:

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

إعادة استخدام المنطق مع الـ Hooks المخصصة

يأتي React مع Hooks مدمجة مثلuseState، وuseContext، وuseEffect. في بعض الأحيان، قد تتمنى وجود Hook لغرض أكثر تحديداً: على سبيل المثال، لجلب البيانات، أو لتتبع ما إذا كان المستخدم متصلاً بالإنترنت، أو للاتصال بغرفة دردشة. للقيام بذلك، يمكنك إنشاء Hooks الخاصة بك لتلبية احتياجات تطبيقك.

في هذا المثال، تتبع الـ Hook المخصصةusePointerPositionموضع المؤشر، بينما تُرجع الـ Hook المخصصةuseDelayedValueقيمة "تتأخر" عن القيمة التي مررتها بعدد معين من المللي ثانية. حرك المؤشر فوق منطقة معاينة صندوق الرمل لترى مساراً متحركاً من النقاط يتبع المؤشر:

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

ماذا بعد؟

توجه إلىReferencing Values with Refs