شرح صفوف ومحتوى الفقرة
أحياناً يشغل المكون نفس الموضع والنوع في الشجرة لكنه يمثل كياناً مختلفاً منطقياً، مثل صندوق كتابة محادثة <ChatComposer /> عند التبديل من مراسلة «سارة» إلى «عمر». افتراضياً تحتفظ React بنص المسودة المكتوب مما قد يوقع المستخدم في خطأ إرسال الرسالة للشخص الخطأ!
مرر خاصية key={selectedUser.id} لإبلاغ React بأن صندوق كل مستلم يمثل هوية مستقلة؛ فبمجرد تغير المفتاح تحذف المكتبة النسخة السابقة وتنشئ نسخة نظيفة بحالة ابتدائية فارغة:
| سيناريو شجرة الواجهة | سلوك المطابقة في React | مصير حالة المكون |
|---|---|---|
| نفس نوع المكون في نفس الموضع | تحديث خصائص النسخة القائمة نفسها | تبقى الحالة محفوظة كما هي |
| تغير نوع العنصر أو إزالته | إزالة الفرع القديم وبناء فرع جديد | تُمسح الحالة القديمة بالكامل |
| تغير قيمة خاصية المفتاح key | التعامل معه كهوية مكون جديدة مستقلة | تصفير الحالة تلقائياً للقيم الابتدائية |
| رفع الحالة للأب المشترك الأقرب | تمرير القيمة ودالة التحديث عبر الخصائص | تزامن تام ولحظي بين المكونات الشقيقة |
function Messenger() {
const [to, setTo] = useState(CONTACTS[0]);
return (
<div>
<ContactList list={CONTACTS} onSelect={setTo} />
<ChatBox key={to.id} contact={to} />
</div>
);
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس مزامنة المكونات الشقيقة برفع الحالة المشتركة إلى الأب الأقرب، والتمييز بين المكونات الموجهة وذاتية الإدارة، وفهم ارتباط عمر الحالة بموضع الشجرة وكيفية تصفيرها عمداً بتمرير خاصية المفتاح key. الخطوة التالية: انتقل الآن إلى الدرس رقم 27 «منهجية التفكير بطريقة React خطوة بخطوة» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.