في هذا الدرس 6تصفّح المواضيع
تحتاج المكونات التفاعلية باستمرار لتذكر قيم تتغير بفعل المستخدم مثل رقم الشريحة المعروضة أو حالة فتح القائمة أو عداد السلة، وتُعرف هذه الذاكرة الخاصة بالمكون في React باسم الحالة (State).
عندما يجرب المبتدئ تعريف متغير محلي عادي مثل let index = 0 وزيادته داخل حدث النقر فإنه يصطدم بعائقين: الأول أن المتغيرات المحلية لا تبقى حية بين التصييرات بل تُنشأ من الصفر في كل استدعاء، والثاني أن تعديلها لا يرسل أي إشارة إلى React بضرورة إعادة رسم الشاشة.
import { useState } from 'react';
function LessonStepper() {
const [step, setStep] = useState(1);
return (
<button onClick={() => setStep(step + 1)}>
Current Lesson Step: {step}
</button>
);
}لإضافة ذاكرة حية إلى مكونك، استورد الخطاف useState من حزمة 'react' واستدعه في مطلع الدالة بالقيمة المبدئية هكذا const [count, setCount] = useState(0). يعيد هذا الاستدعاء مصفوفة ثنائية نفككها إلى عنصرين متلازمين:
- متغير القراءة الحالي (
count): يحمل القيمة المحفوظة لهذه اللحظة. - دالة ضبط الحالة (
setCount): تحدّث القيمة المخزنة وتطلب من React إعادة تصيير المكون فوراً.
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>
);
}يمكن للمكون الدالي الواحد استدعاء useState عدة مرات لحفظ قيم متعددة. امنح كل زوج اسماً معبراً مثل [activeTab, setActiveTab] و[showHint, setShowHint]؛ ففصل القيم غير المترابطة في خطافات مستقلة يجعل تحديث كل قيمة مباشراً وبسيطاً.
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>
);
}تتميز الحالة بأنها محلية ومعزولة تماماً لكل نسخة مكون معروضة على الشاشة. فإذا عرضت المكون <SeatCounter /> مرتين جنباً إلى جنب داخل صفحة واحدة، تحجز React ذاكرة منفصلة تماماً لكل نسخة بحيث لا يؤثر تغيير الأولى إطلاقاً على الثانية.
import { useState } from 'react';
function VoteWidget({ track }) {
const [votes, setVotes] = useState(0);
return (
<button onClick={() => setVotes(votes + 1)}>
{track}: {votes} votes
</button>
);
}تُسمى الدوال المبدوءة بالسابقة use في React الخطافات (Hooks)، وتخضع لقاعدتين صارمتين لا استثناء فيهما:
- الاستدعاء في المستوى الأعلى فقط: يُحظر تماماً استدعاء
useState()داخل جمل شرطيةifأو حلقات تكرار أو دوال فرعية أو بعد جملة إرجاع مبكرةreturn. - الاستدعاء داخل دوال React فقط: تُستدعى الخطافات حصراً داخل المكونات الدالية أو الخطافات المخصصة.
لماذا تشترط React ثبات ترتيب الخطافات في كل تصيير؟ لاحظ أن استدعاء useState(0) لا يمرر اسماً نصياً للمتغير، بل تحتفظ React داخلياً بمصفوفة خلايا مرقمة لكل مكون وتقرأها بفهرس متسلسل (0 ثم 1 ثم 2) أثناء الرسم. فإذا اختفى خطاف داخل شرط if اختلّت فهارس كافة الخطافات التالية له. يلخص الجدول التالي الفروق الحاسمة:
| وجه المقارنة | المتغير المحلي العادي | خطاف الحالة useState |
|---|---|---|
| بقاء القيمة بين التصييرات | تُصفر وتُنشأ من جديد في كل استدعاء للدالة | تحتفظ بها React في خلية ذاكرة المكون |
| تحفيز تحديث الشاشة | تعديلها صامت ولا يعيد رسم الواجهة أبداً | استدعاء دالة الضبط يجدول إعادة تصيير فورية |
| عزل النسخ المتعددة | المتغير الخارجي يشترك خطأً بين كل النسخ | تمتلك كل نسخة معروضة ذاكرة مستقلة خاصة بها |
| قاعدة موضع التعريف | تُكتب في أي موضع أو داخل الشروط والحلقات | تُستدعى في المستوى الأعلى للدالة دون شروط |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
اكتشفت في هذا الدرس سبب عجز المتغيرات المحلية عن تحديث الشاشة، وأضفت ذاكرة تفاعلية حية عبر خطاف useState مع تعدد الحالات وعزل ذاكرة كل نسخة مكون والالتزام التام بقواعد ترتيب الخطافات. الخطوة التالية: انتقل الآن إلى الدرس رقم 19 «دورة التصيير والاعتماد والحالة كلقطة ثابتة» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 State حالة المكون
- الذاكرة التفاعلية الخاصة بالمكون التي تديرها React وتؤدي تغييراتها إلى إعادة رسم الواجهة تلقائياً.
- للمراجعة
- 02 Hook الخطاف البرمجي
- دالة خاصة في React تبدأ بالسابقة use تتيح للمكونات الدالية الاستفادة من ميزات الحالة ودورة الحياة.
- للمراجعة
- 03 Setter Function دالة ضبط الحالة
- العنصر الثاني الذي يعيده خطاف useState ويُستخدم لتخزين القيمة الجديدة وطلب إعادة تصيير المكون.
- للمراجعة
- 04 Instance Isolation استقلال ذاكرة النسخة
- ضمان معماري يمنح كل نسخة معروضة من المكون خلايا حالة مستقلة تماماً عن بقية النسخ في الشاشة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 UI UI
- User Interface
- واجهة العرض البصرية التي تعيد React مزامنتها تلقائياً مع كل تحديث في متغيرات الحالة.
- للمراجعة
- 02 ES6 ES6
- ECMAScript 2015
- معيار اللغة الحديث الذي وفر صياغة تفكيك المصفوفات المستخدمة مع خطاف useState.
- للمراجعة
- 03 AST AST
- Abstract Syntax Tree
- التمثيل الشجري للكود الذي تفحصه أداة التدقيق لاكتشاف أي خرق لقواعد الخطافات أثناء الكتابة.
- للمراجعة
- 04 DOM DOM
- Document Object Model
- شجرة المتصفح التي تحدث React الأجزاء المتغيرة منها بكفاءة عقب تغير حالة المكون.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال عرض النصائح في محرر التجريب وأضف زراً ثالثاً يستدعي setIndex(0) للعودة الفورية إلى الشريحة الأولى.
-
في مثال عزل النسخ بمحرر التجريب، أضف نسخة ثالثة من مكون التصويت وتأكد أن عدادها يزداد بمعزل تام عن النسختين الأخريين.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
لماذا يفشل تعديل متغير محلي عادي مثل let count = 0 داخل دالة النقر في تحديث شاشة مكون React؟
لأن المتغيرات المحلية تتصفر في كل تصيير ولا تُشعر React بوجوب إعادة رسم الواجهة.
ما العنصران اللذان تعيدهما المصفوفة الثنائية الناتجة عن استدعاء useState(initialValue)؟
تعيد مصفوفة تضم القيمة الحالية للحالة أولاً ثم دالة التحديث ثانياً.
عند عرض المكون <Counter /> مرتين في نفس الصفحة، فإن النقر على الأول يزيد عداد الثاني تلقائياً.
خطأ؛ فذاكرة الحالة معزولة ومستقلة تماماً لكل نسخة مكون معروضة على الشاشة.
أي ممارسة مما يلي تخرق القواعد الصارمة لاستدعاء الخطافات في React؟
يُحظر استدعاء أي خطاف داخل جمل شرطية if أو حلقات تكرار أو بعد إرجاع مبكر.
كيف تربط React داخلياً كل استدعاء لخطاف useState بخلية الذاكرة الصحيحة الخاصة به عبر التصييرات؟
تعتمد React على ثبات فهرس وترتيب استدعاء الخطافات المتطابق في كل عملية تصيير.
يُسمح للمكون الدالي الواحد باستدعاء useState عدة مرات لحفظ قيم حالة مستقلة عن بعضها.
صواب؛ فتقسيم القيم غير المترابطة في عدة استدعاءات useState يجعل التحديث أوضح وأسهل صيانة.
متى تُستخدم القيمة الأولية الممررة في useState(0) لتحديد قيمة الحالة؟
تُعتمد القيمة المبدئية خلال التصيير الأول للمكون فقط، ثم تُقرأ القيمة المحدثة في التصييرات اللاحقة.
إذا تضمن المكون إرجاعاً شرطياً مبكراً مثل if (!open) return null، فيجب وضع كافة استدعاءات useState قبله في الأعلى.
صواب؛ لأن وضع خطاف بعد إرجاع شرطي يغير عدد الخطافات المستدعاة بين التصييرات ويسبب خطأً فورياً.
ما الفارق المعماري الجوهري بين الخصائص props والحالة state في مكونات React؟
تمثل props مدخلات للقراءة فقط يمررها الأب، بينما تمثل state الذاكرة الداخلية التي يحدثها المكون بدالة الضبط.
بأي بادئة إنجليزية قياسية يبدأ اسم كل خطاف Hook في مكتبة React؟
تبدأ جميع الخطافات المدمجة والمخصصة في React بالسابقة القياسية use.