إدارة الحالة

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

الاستجابة للإدخال باستخدام الحالة

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

إليك نموذج اختبار مبني باستخدام React. لاحظ كيف يستخدم متغير الحالةstatusلتحديد ما إذا كان سيتم تمكين زر الإرسال أو تعطيله، وما إذا كان سيتم عرض رسالة النجاح بدلاً من ذلك.

اختيار بنية الحالة

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

على سبيل المثال، يحتوي هذا النموذج على متغير حالةزائدfullName:

يمكنك إزالته وتبسيط الكود عن طريق حسابfullNameأثناء عرض المكون:

قد يبدو هذا التغيير بسيطًا، لكن العديد من الأخطاء في تطبيقات React تُصلح بهذه الطريقة.

مشاركة الحالة بين المكونات

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

في هذا المثال، يجب أن يكون لوحة واحدة فقط نشطة في كل مرة. لتحقيق ذلك، بدلاً من الاحتفاظ بحالة النشاط داخل كل لوحة على حدة، يحتفظ المكون الأب بالحالة ويحدد الخصائص (props) لأطفاله.

الحفاظ على الحالة وإعادة تعيينها

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

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

يتيح لك React تجاوز السلوك الافتراضي، وإجبارمكون على إعادة تعيين حالته عن طريق تمريرkeyمختلف له، مثل<Chat key={email} />. يخبر هذا React أنه إذا كان المستلم مختلفًا، فيجب اعتباره مكونمختلفًاChatيحتاج إلى إعادة إنشائه من الصفر بالبيانات الجديدة (والواجهة مثل حقول الإدخال). الآن يؤدي التبديل بين المستلمين إلى إعادة تعيين حقل الإدخال - حتى لو كنت تعرض نفس المكون.

استخراج منطق الحالة إلى مخفض (Reducer)

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

تمرير البيانات بعمق باستخدام Context

عادةً، ستمرر المعلومات من المكون الأب إلى المكون الابن عبر الـ props. لكن تمرير الـ props يمكن أن يصبح غير مريح إذا كنت بحاجة إلى تمرير بعض الـ props عبر العديد من المكونات، أو إذا احتاجت العديد من المكونات إلى نفس المعلومات. يتيح Context للمكون الأب جعل بعض المعلومات متاحة لأي مكون في الشجرة أسفله—بغض النظر عن عمقه—بدون تمريرها بشكل صريح عبر الـ props.

هنا، يحدد مكونHeadingمستوى العنوان الخاص به عن طريق "سؤال" أقرب مكونSectionعن مستواه. كل مكونSectionيتتبع مستواه الخاص عن طريق سؤال المكون الأبSectionوإضافة واحد إليه. كل مكونSectionيوفر المعلومات لجميع المكونات أسفله بدون تمرير الـ props—يفعل ذلك عبر Context.

التوسع باستخدام Reducer و Context

تتيح لك Reducers توحيد منطق تحديث حالة المكون. يتيح لك Context تمرير المعلومات بعمق إلى مكونات أخرى. يمكنك الجمع بين Reducers و Context معًا لإدارة حالة شاشة معقدة.

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

ماذا بعد؟

توجه إلىالاستجابة للإدخال باستخدام الحالةلتبدأ قراءة هذا الفصل صفحة بصفحة!

أو، إذا كنت ملمًا بالفعل بهذه المواضيع، لماذا لا تقرأ عنالمخارج الاحتياطية؟