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

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

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

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

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

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

HTML

import { useState } from 'react';

function LessonStepper() {
  const [step, setStep] = useState(1);
  return (
    <button onClick={() => setStep(step + 1)}>
      Current Lesson Step: {step}
    </button>
  );
}

جرّب بنفسك

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

Why Local Variables Fail UI لماذا تفشل المتغيرات العادية

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

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