انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: ذاكرة المكون عبر useState وقواعد الخطافات

Introducing the useState Hook تخزين الحالة بخطاف useState

افهم لماذا تفشل المتغيرات المحلية العادية في تحديث الواجهة، وأتقن منح المكون ذاكرة حية عبر خطاف useState وعزل ذاكرة كل نسخة والالتزام بقواعد الخطافات.
3 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

لإضافة ذاكرة حية إلى مكونك، استورد الخطاف useState من حزمة 'react' واستدعه في مطلع الدالة بالقيمة المبدئية هكذا const [count, setCount] = useState(0). يعيد هذا الاستدعاء مصفوفة ثنائية نفككها إلى عنصرين متلازمين:

  1. متغير القراءة الحالي (count): يحمل القيمة المحفوظة لهذه اللحظة.
  2. دالة ضبط الحالة (setCount): تحدّث القيمة المخزنة وتطلب من React إعادة تصيير المكون فوراً.
الصف 2 كود برمجي
HTML 
import { useState } from 'react';

function TipDeck({ tips }) {
  const [idx, setIdx] = useState(0);
  const next = () => setIdx((idx + 1) % tips.length);
  return (
    <div className="rx-card">
      <p>{tips[idx]}</p>
      <button onClick={next}>Next Tip</button>
    </div>
  );
}
جرّب بنفسك
الصف 3 معاينة حية

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