لماذا تكسر الكائنات المضمنة التغليف | تخطي إعادة التصيير غير الضرورية عبر React.memo

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

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

بسبب الاعتماد على مقارنة المراجع، فإن تمرير كائن مضمن مباشرة داخل JSX مثل options={{ showGrid: true }} يُبطل مفعول memo() بصمت! ففي كل مرة يعمل فيها الأب تنشئ اللغة كائناً جديداً في الذاكرة فتكون نتيجة المقارنة false دائماً.

قبل اللجوء لأي خطافات إضافية، طبّق حلين بسيطين وفعالين: ارفع كائنات الإعدادات الثابتة خارج دالة المكون كثابت على مستوى الملف، أو مرر القيم المفردة كخصائص أولية مباشرة مثل showGrid={true}، وسنتعلم في الدرس 44 تثبيت الكائنات والدوال الديناميكية.

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

مقارنة توضح كيف يكسر تمرير كائن مضمن جديد تغليف React.memo بينما تنجح الخصائص الأولية في تخطي إعادة الرسم

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

HTML

const CHART_THEME = { stroke: '#7750b2' };

const MetricChart = memo(function MetricChart(props) {
  return (
    <p>{props.theme.stroke} | {String(props.dense)}</p>
  );
});

// <MetricChart theme={CHART_THEME} dense={isDense} />

جرّب بنفسك

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

How Inline Objects Break memo لماذا تكسر الكائنات المضمنة التغليف

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

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