متى يحقق React.memo فرقاً ملموساً | تخطي إعادة التصيير غير الضرورية عبر React.memo

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

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

متى يحقق تغليف React.memo مكسباً ملموساً يستحق الإضافة؟ يبرع هذا الأسلوب مع المكونات العرضية النقية متوسطة أو ثقيلة الوزن—كالجداول الكبيرة والمخططات ومعاينات النصوص الطويلة—عندما يتكرر تصيير المكون الأب باستمرار بينما تبقى خصائص هذا الابن ثابتة في أغلب التحديثات:

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

HTML

const Leaderboard = memo(function Leaderboard(props) {
  const rows = TRACKS.filter(
    (t) => t.score >= props.minScore
  );
  return <p>Qualified tracks: {rows.length}</p>;
});
// Unrelated parent pulses skip Leaderboard!

جرّب بنفسك

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

When React.memo Helps Most متى يحقق React.memo فرقاً ملموساً

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

جميع فقرات هذا الدرس (تخطي إعادة التصيير غير الضرورية عبر React.memo)