حالة مستقلة
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 26 من 42.
هل تحتاج إلى تذكر شيئين؟ قم باستدعاء useState مرتين. ينشئ كل استدعاء حالة مستقلة تمامًا:
const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);تحديث cats يُعيد رسم (re-renders) المكوّن، لكن dogs تحتفظ بقيمتها دون تغيير. كل حالة (state) لها دالة التعيين (setter) الخاصة بها، والخلط بينها هو الخطأ الأكثر شيوعًا للمبتدئين: setCats(dogs + 1) يترجم (compiles) بشكل صحيح ولكنه يظل خاطئًا.
التحدي
متوسطقم بتشغيل لوحة استقبال المأوى: عدادان لا يتداخلان.
- أضف حالتين،
catsوdogs، وتبدأ كلاهما من 0. - اعرضهما في
id="cats"وid="dogs". - الزر
id="add-cat"يضيف قطة واحدة؛ والزرid="add-dog"يضيف كلبًا واحدًا.
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة