React.memo تخزين المكوّنات
آخر تحديث: 2026-11-03
React.memo تخزين المكوّنات
تغليف المكوّن بـ React.memo يتيح له تخطّي إعادة العرض حين تبقى خصائصه متساوية في مقارنة سطحية، فيعيد استخدام ناتج العرض السابق كما هو. ويناسب المكوّنات الفرعية المكلفة في العرض ذات الخصائص المستقرة، وتكون الفائدة أكبر حين يحدّث الأب كثيراً، مثل أثناء الكتابة أو تحريك الماوس. ولأن المقارنة سطحية، فإن كائناً أو دالة جديدين في الخصائص يُبطلان الذاكرة المؤقتة، لذا يُغلَف memo عادةً مع useMemo أو useCallback.
| المجموعة | الآثار الجانبية والأداء |
|---|---|
| النوع | واجهة برمجية |
| منذ الإصدار | React 16.6 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const MemoList = memo(function List({ items, onSelect }) {
return items.map(it => <Row key={it.id} item={it} onSelect={onSelect} />)
})
// تطابق الـ props بعد مقارنة سطحية يعني تخطّي العرض
// الوسيط الثاني يخصّص المقارنة: memo(Cmp, (prev, next) => equal)⚙️ المعاملات
| Component | المكوّن المراد تغليفه، وهو عادةً مكوّن عرض مكلف في إعادة العرض. |
|---|---|
| areEqual (optional) | دالة مقارنة مخصّصة (prevProps, nextProps) => boolean؛ وإرجاع true يعني أن الخصائص متساوية ويُتخطّى العرض. |
القيمة المرجعة：يعيد نسخة مُخزَّنة من المكوّن، تُستخدم تماماً مثل الأصل.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
الضغط المتكرر على الزر يحدّث نص العدّاد فقط وتتوقّف الطرفية عن طباعة «The list rendered» — فمرجع items لا يتغيّر، فيتيح لـ memo للقائمة كلها تخطّي إعادة العرض.💡 النقاط الأساسية
💡 نصيحة لا يقوم memo سوى مقارنة سطحية للخصائص: والدالة أو الكائن المُنشأ في كل عرض يُبطل الذاكرة المؤقتة، فاقرنه بـ useCallback أو useMemo.
ℹ️ ملاحظة المكوّن الذي يستقبل children مرشّح ضعيف عادةً لـ memo — فـ children مرجع عنصر جديد في كل عرض.
⚠️ تحذير لا تغلّف كل مكوّن بـ memo دون تفكير: فللغلاف كلفة مقارنة أيضاً، فحدّد نقاط الاختناق الحقيقية أولاً عبر DevTools Profiler.
🏷️ المزيد من الآثار والأداء
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين memo و useMemo؟
ج memo مكوّن دالٍّ أعلى رتبة يخزّن ناتج عرض مكوّن، أما useMemo فهو خطّاف يخزّن قيمة محسوبة واحدة.
س لماذا لا يزال المكوّن المُخزَّن يُعاد عرضه؟
ج الأرجح أن الخصائص تحوي كائناً أو مصفوفة أو دالة تُنشأ في كل عرض، فلا تتساوى المقارنة السطحية أبداً — ثبّت المراجع بـ useMemo أو useCallback.
س كيف أكتب الوسيط الثاني areEqual؟
ج يستقبل (prev, next) ويعيد true حين يُعتبران متساويين فيُتخطّى العرض؛ واستخدمه فقط حين لا تناسب المقارنة السطحية فعلاً، مثل مقارنة حقل واحد متداخل بعمق.
