آلية عمل تغليف React.memo | تخطي إعادة التصيير غير الضرورية عبر React.memo

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

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

في كثير من لوحات التحكم تشترك حالة عُليا في نفس المكون الأب الذي يعرض جدولاً ضخماً أو مخططاً بيانياً معقداً، بحيث يتعذر فصل الحالة بالأسفل. هنا يأتي دور الدالة العليا memo() المستوردة من react والمعروفة أيضاً باسم React.memo().

عند تغليف مكون دالي نقي بالصيغة memo(function RevenueCard(props) { ... })، فإنك تخبر React بوضوح: «إذا أُعيد تصيير الأب وبقيت جميع خصائصي مطابقة للتصيير السابق، فتخطَّ تشغيل دالتي وأعد استخدام النتيجة السابقة فوراً».

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

HTML

import { memo, useState } from 'react';

const RevenueCard = memo(function RevenueCard(props) {
  return (
    <article>
      <h3>{props.quarter}: {props.total} USD</h3>
    </article>
  );
});

جرّب بنفسك

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

How React.memo Wraps Components آلية عمل تغليف React.memo

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

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