ارتباط الحالة بموقع الشجرة | رفع الحالة للأعلى وهوية بقاء أو تصفير الحالة

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

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

كيف تميز React أي حالة تخص أي مكون عبر عمليات إعادة التصيير؟ تربط المكتبة كل حالة بموضع المكون داخل شجرة العرض وليس بسطر JSX المكتوب في الملف!

فإذا بدل شرط ثلاثي بين <ScoreCounter isFancy={true} /> و<ScoreCounter isFancy={false} /> في نفس الموضع الأول تماماً، ترى React أنه نفس نوع المكون في نفس الخانة الشجرية فتحافظ على قيمة عداده دون مسح.

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

HTML

function Arena() {
  const [highlight, setHighlight] = useState(false);
  return (
    <div>
      {highlight ? <Counter accent /> : <Counter />}
      <button onClick={() => setHighlight(!highlight)}>
        Toggle Style
      </button>
    </div>
  );
}

جرّب بنفسك

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

State Tied to Tree Position ارتباط الحالة بموقع الشجرة

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

جميع فقرات هذا الدرس (رفع الحالة للأعلى وهوية بقاء أو تصفير الحالة)