جاري التحميل...
جاري التحميل...
إدارة البيانات التفاعلية مع useState
الحالة (State) هي بيانات تتغير مع الوقت وتؤثر على ما يعرضه المكون. عند تغيير الحالة، يُعيد React عرض المكون تلقائياً.
فكّر في الحالة كـ ذاكرة للمكون: تتذكر الأشياء بين العروض.
💡 تشبيه بسيط:
الحالة مثل مفتاح النور. عندما تضغط على المفتاح، يتغير حالة النور (مضاء/مطفأ). هذا التغيير يُنعكس على الغرفة (واجهة المستخدم). الحالة في React كذلك — تتغير بفعل المستخدم، وتنعكس على الواجهة تلقائياً.
على سبيل المثال، العداد يحتاج إلى تذكر العدد الحالي. المفتاح يحتاج إلى تذكر الرؤية. نموذج تسجيل الدخول يحتاج إلى تذكر ما إذا كان المستخدم قد أدخل بياناته.
بدون الحالة، لا يمكنك بناء تطبيقات تفاعلية. تخيل أن كل شيء في واجهة المستخدم كان ثابتاً ولم يتغير أبداً.
الحالة هي ما يجعل تطبيقات React تفاعلية.
useState هو الخطاف الأول الذي ستستخدمه. يسمح لك بـ "تثبيت" ميزات الحالة في مكون الدالة.
الصيغة الأساسية لـ useState:
💡 مهم:
عادة ما يبدأ اسم دالة التحديث بـ set مثل setCount و setName. هذه اتفاقية وليست قاعدة صارمة.
إليك عداداً بسيطاً باستخدام useState:
0 باستخدام useState(0)count (القيمة الحالية) و setCount (دالة التحديث)setCount(count + 1)مثال أكثر تعقيداً: قائمة مهام تسمح بإضافة وإكمال وحذف المهام.
useState بمصفوفة كقيمة أوليةsetTodos مع map و filter[...todos, newTodo]هناك قواعد صارمة عند استخدام الخطافات في React:
الخصائص تأتي من المكون الأصل (خارجية، للقراءة فقط). الحالة داخلية للمكون (قراءة وكتابة).
💡 تشبيه بسيط:
الحالة والخصائص مثل القائمة والطلب في مطعم. القائمة (Props) تأتي من المطعم — أنت لا تستطيع تغييرها. الطلب (State) هو ما تختاره أنت — يمكنك تغييره كما تشاء. القائمة هي مدخلات خارجية، والطلب هو قرارك الداخلي.
عندما تستدعي setter مثل setCount
ما هي الطريقة الصحيحة لإنشاء الحالة باستخدام useState؟
ماذا يحدث عند استدعاء دالة set في React؟
ما الفرق بين الخصائص والحالة؟
أي استخدام صحيح لـ useState؟
لماذا نستخدم دالة التحديث بدلاً من القيمة المباشرة؟
أنشئ تطبيقاً يجمع بين عداد ومفتاح إظهار/إخفاء المحتوى باستخدام الحالة.
الحل:
function SmartCounter() {
const [count, setCount] = useState(0);
const [isVisible, setIsVisible] = useState(true);
const [toggleCount, setToggleCount] = useState(0);
const handleToggle = () => {
setIsVisible(!isVisible);
setToggleCount(prev => prev + 1);
};
return (
<div>
<h2>العداد: {count}</h2>
<button onClick={() => setCount(prev => prev + 1)}>+</button>
<button onClick={() => setCount(prev => prev - 1)}>-</button>
<button onClick={() => setCount(0)}>إعادة تعيين</button>
<button onClick={handleToggle}>إظهار/إخفاء</button>
{isVisible && <p>النص مرئي</p>}
<p>عدد مرات التبديل: {toggleCount}</p>
</div>
);
}المفاهيم الأساسية:
الأوامر:
لماذا نستخدم دالة التحديث بدلاً من القيمة المباشرة؟
الإجابة:
لأن التحديثات قد تكون مجمّعة. دالة التحديث تضمن أنك تعمل مع أحدث قيمة.
متى يُعاد تشغيل المكون عند تغيير الحالة؟
الإجابة:
فقط عندما تستدعي setter. إذا وضعت القيمة نفسها، React يتجاهل التحديث.
ما هي قواعد الخطافات؟
الإجابة:
لا تستدعي الخطافات داخل الحلقات أو الشروط أو الدوال المتداخلة. فقط في المستوى الأعلى.
استخدم updater function دائماً
setCount(prev => prev + 1) أفضل من setCount(count + 1) لضمان صحة القيم
لا تضع الحالة المركبة
بدلاً من state = {name: '', age: 0}، استخدم حالتين منفصلتين