عزل الحالة بالمكون الفرعي الأصغر | فهم أسباب إعادة التصيير وقياس الأداء في React

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

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

قبل التفكير في أي خطافات تخزين مؤقت، افحص موقع الحالة في شجرة المكونات: إذا كانت هناك حالة سريعة التغير—مثل مسودة ملاحظة أو عداد أحرف أو فتح قائمة صغيرة—لا يحتاجها سوى جزء واحد من الشاشة، فالحل الأمثل هو نقل الحالة لأسفل (Moving State Down) داخل مكون فرعي مستقل.

بمجرد انتقال الحالة داخل <QuickNoteBox />، تقتصر إعادة التصيير عليه وحده، فلا يُعاد حساب الجداول الثقيلة المجاورة له مع كل حرف يُكتب.

الصف 2 صورة توضيحية

مقارنة بين وضع حالة الحقل السريع في المكون الجذري وإعادة رسم الصفحة كاملة وبين عزل الحالة في مكون فرعي صغير

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

HTML

function QuickNoteBox() {
  const [note, setNote] = useState('');
  return (
    <input
      value={note}
      onChange={(e) => setNote(e.target.value)}
      placeholder="Type a quick note..."
    />
  );
}
// Workspace renders <QuickNoteBox /> + <HeavyMetrics />

جرّب بنفسك

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

Moving State Down Optimization عزل الحالة بالمكون الفرعي الأصغر

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

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