تعدد متغيرات الحالة بالمكون | ذاكرة المكون عبر useState وقواعد الخطافات

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمكن للمكون الدالي الواحد استدعاء useState عدة مرات لحفظ قيم متعددة. امنح كل زوج اسماً معبراً مثل [activeTab, setActiveTab] و[showHint, setShowHint]؛ ففصل القيم غير المترابطة في خطافات مستقلة يجعل تحديث كل قيمة مباشراً وبسيطاً.

الصف 2 صورة توضيحية

مقارنة بين المتغير المحلي العادي الذي يفشل في تحديث الشاشة وخطاف useState الذي يحفظ الحالة ويعيد تصيير المكون

الصف 3 كود برمجي

HTML

import { useState } from 'react';
function QuizFlashcard() {
  const [pts, setPts] = useState(0);
  const [open, setOpen] = useState(false);
  const flip = () => setOpen(!open);
  return (
    <p>
      <button onClick={() => setPts(1)}>+1</button>
      <button onClick={flip}>Hint ({pts})</button>
    </p>
  );
}

جرّب بنفسك

الصف 4 ملاحظة هامة

Multiple State Variables Usage تعدد متغيرات الحالة بالمكون

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (ذاكرة المكون عبر useState وقواعد الخطافات)