كيفية جعل التفاعل في التفاعل مع الدول

الصورة من قبلigorovsyannykov من Unsplash
هذا جزء من سلسلة "React for للمبتدئين" الخاصة بي حول تقديم React وميزاته الأساسية وأفضل الممارسات التي يجب اتباعها. المزيد من المقالات قادمون!
<السابق | التالي>

إذا كنت تعرف كيفية عرض مكون React - فهذا رائع. الآن ، دعونا نعطي مكوناتنا بياناتهم الخاصة.

إخلاء المسئولية: يركز هذا المقال على حالة React المضمنة. لاحظ أن حالة المكون و Redux غير متوافقة ، لأن الغرض منها مختلف.

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

هل أحتاج إلى دولة؟

لمعرفة الحالات ، دعونا ننشئ مكون أسئلة. سيعرض نعم / لا سؤال ويطلب إجابة.

يحتوي سؤالنا على ثلاث وظائف فقط:

  • مُنشئ التهيئة (الدعائم والدولة) ،
  • answerQuestion هو رد اتصال يتم تشغيله عندما يجيب المستخدم
  • عرض ربما تعرفه بالفعل - يقوم بإخراج قالب المكون.

هذا المكون له حالتان متميزتان. لم يتم الإجابة على السؤال ، أو السؤال لديه إجابة.

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

الحالة هي ذاكرة المكون التي تتذكر إذا كان السؤال لديه إجابة. إذا كان الأمر كذلك ، فهو يعرف أيضًا الإجابة.

تحويل الدولة إلى الدعائم

استخدام حالة في مكون سهل. يجب عليك تهيئة الحالة واستدعاء setStatefunction كلما أردت تحديث محتواها.

تخيل أن تكون عنصرا إذا تغيرت حالتك ، فسيكون رد فعلك هو التحقق مما إذا كان عليك تحديث عرضك.

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

المكونات الحصول على الدعائم من المكونات الأخرى. إذا تغيرت هذه الدعائم ، فسيتم تحديث المكون.

في الواقع ، أنت تعرف بالفعل كيف تعمل - ولكن دعنا نأخذ مثالا على دراسة استقصائية تحتوي على بعض الأسئلة.

يحتوي الاستطلاع على تسميات أسئلة في حالته ويعطيه السؤال كممتلكات.

عندما يقوم Survey بتحديث حالته (المكالمات setState) ، يتم تشغيل وظيفة التجسيد. إذا كان الأمر كذلك ، فهو يرسل طلبًا لتقديم السؤال (التفاصيل في React doc).

اعتماد نمط الحاوية

كان فصل العرض وبقية الكود دائمًا مصدر قلق كبير بين المطورين. لهذا السبب تمتد معظم أنماط التصميم المستخدمة في الأطر من نمط MVC.

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

لقد حان الوقت لتقسيم مكون السؤال إلى مكونين.

السؤال سيكون مسؤولا عن تقديم الدعائم. يسمى هذا النوع من المكون إما مكون وظيفي أو تقديمي أو مكون غبي.

QuestionContainer سيتعامل مع إدارة الدولة.

للمقارنة مع نمط تصميم MVC ، Question is a View و QuestionContainer هو Controller.

تستخدم المكونات الأخرى التي تحتاج إلى Questionwill الآن QuestionContainer بدلاً من Question. هذا الاعتبار مقبول تماما في المجتمع.

كن حذرا حول setState المضادة للنمط

باستخدام هذا setState بسيط جدا.

تمرير الحالة التالية كمعلمة الأولى والوحيدة. سيتم تحديث خصائص الحالة الحالية مع القيم الجديدة التي تم تمريرها.

خلاصة القول ، لا تستخدم هذا.

قد لا تحتوي هذه المتغيرات على القيم التي تتوقعها. React يحسن تغييرات الدولة. يسحق مضاعفات التغييرات في واحد لمشاكل الأداء (قبل تحسينات DOM الظاهري).

يجب أن تفضل النموذج الآخر من setState. وفر وظيفة كمعلمة فقط واستخدم معلمات prop and state (انظر الوثائق).

مكون المسح الكامل

في هذه المقالة ، قمنا بتغطية استخدامات الحالة الرئيسية في React. يمكنك العثور على الكود الكامل لمكون الاستقصاء في Codepen التالي.

كان هذا كل شيء عن الدول. لقد واجهت المكونات والدعائم والحالات ، والآن لديك مجموعة المبتدئين للعب مع React.

أتمنى أن تستمتع بقراءة هذا المقال وتعلمت الكثير من الأشياء!

إذا وجدت هذه المقالة مفيدة ، فيرجى النقر فوق الزر "a" عدة مرات لجعل الآخرين يجدون هذه المقالة ولإظهار دعمكم!

لا تنسى متابعتي لتلقي إشعار بمقالاتي القادمة

هذا جزء من سلسلة "React for للمبتدئين" الخاصة بي حول تقديم React وميزاته الأساسية وأفضل الممارسات التي يجب اتباعها.
<السابق | التالي>

تحقق من مقالاتي الأخرى

➥ JavaScript

  • كيفية تحسين مهاراتك في JavaScript عن طريق كتابة إطار تطوير الويب الخاص بك
  • الأخطاء الشائعة لتجنب أثناء العمل مع Vue.js

➥ نصائح والخدع

  • وقف تصحيح جافا سكريبت مؤلمة واحتضان Intellij مع خريطة المصدر
  • كيفية تقليل حزم جافا سكريبت هائلة دون جهد