إضافة التفاعلية

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

الاستجابة للأحداث

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

المكونات المدمجة مثل<button>تدعم فقط أحداث المتصفح المدمجة مثلonClick. ومع ذلك، يمكنك أيضًا إنشاء مكوناتك الخاصة، وإعطاء خاصيات معالجات الأحداث الخاصة بها أي أسماء خاصة بالتطبيق تريدها.

الحالة: ذاكرة المكون

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

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

إليك كيف يستخدم معرض الصور الحالة ويحدّثها عند النقر:

التصيير والإيداع

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

تخيل أن مكوناتك هي طهاة في المطبخ، يجمعون أطباقًا لذيذة من المكونات. في هذا السيناريو، React هو النادل الذي يستقبل طلبات العملاء ويقدم لهم طلباتهم. عملية طلب وتقديم واجهة المستخدم هذه لها ثلاث خطوات:

1. تشغيلعملية تصيير (توصيل طلب الزبون إلى المطبخ)
2. تصييرالمكون (تحضير الطلب في المطبخ)
3. إيداعفي DOM (وضع الطلب على الطاولة)

1. تشغيل
2. تصيير
3. إيداع

الرسوم التوضيحية منRachel Lee Nabors

الحالة كصورة لحظية

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

يساعدك هذا السلوك على تجنب الأخطاء الخفية. إليك تطبيق دردشة صغير. حاول تخمين ما سيحدث إذا ضغطت على "إرسال" أولاً وثمقمت بتغيير المستلم إلى بوب. أي اسم سيظهر فيalertبعد خمس ثوانٍ؟

إضافة سلسلة من تحديثات الحالة إلى قائمة الانتظار

هذا المكون به خطأ: النقر على "+3" يزيد النتيجة مرة واحدة فقط.

الحالة كصورة لحظيةيشرح سبب حدوث ذلك. تعيين الحالة يطلب إعادة تصيير جديدة، لكنه لا يغيرها في الكود الذي يعمل بالفعل. لذا فإنscoreيستمر في أن يكون0مباشرة بعد استدعاءsetScore(score + 1).

يمكنك إصلاح ذلك عن طريق تمريردالة تحديثعند تعيين الحالة. لاحظ كيف أن استبدالsetScore(score + 1)بـsetScore(s => s + 1)يصلح زر "+3". هذا يتيح لك إضافة تحديثات متعددة للحالة إلى قائمة الانتظار.

تحديث الكائنات في الحالة

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

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

إذا أصبح نسخ الكائنات في الكود مملًا، يمكنك استخدام مكتبة مثلImmerلتقليل الكود المتكرر:

تحديث المصفوفات في الحالة

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

إذا أصبح نسخ المصفوفات في الكود مملًا، يمكنك استخدام مكتبة مثلImmerلتقليل الكود المتكرر:

ما التالي؟

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

أو، إذا كنت على دراية بهذه المواضيع بالفعل، لماذا لا تقرأ عنإدارة الحالة؟