React Academy · درس

حفظ قيم السياق مؤقتًا باستخدام useMemo

غلّف كائنات قيم السياق داخل useMemo لمنع إعادة تصيير المستهلكين دون داعٍ.

حفظ قيم السياق مؤقتًا باستخدام useMemo درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

مرحبًا

في هذا الدرس، ستتعلمون سبب ضرورة حفظ كائنات قيم السياق مؤقتًا باستخدام useMemo، وكيفية إعداد التبعيات بشكل صحيح لتجنب عمليات إعادة التصيير غير الضرورية.

مشكلة مرجع الكائن

في كل مرة يُعاد فيها تصيير مكوّن Provider، يُنشأ كائن حرفي جديد `{ ... }` باعتباره قيمة السياق، حتى إن كانت محتوياته متطابقة. ويُعاد تصيير جميع المستهلكين لأن المرجع تغيّر.

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

الإصلاح باستخدام useMemo

غلّفوا قيمة السياق داخل useMemo حتى يُعاد المرجع نفسه للكائن بين عمليات التصيير عندما لا يتغير أي عنصر في مصفوفة deps.

const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

اختيار التبعيات بعناية

أدرجوا كل قيمة مستخدمة داخل useMemo في مصفوفة deps. تؤدي التبعيات الناقصة إلى قيم قديمة. أدرجوا الخصائص البدائية، مثل السلاسل النصية والأرقام، والمراجع المستقرة، مثل الدوال المغلّفة داخل useCallback.

الدوال المستقرة باستخدام useCallback

يتغير مرجع قيم الدوال في كل عملية تصيير. غلّفوها داخل useCallback قبل تضمينها في قيمة سياق تستخدم useMemo، لمنع عمليات إعادة التصيير غير الضرورية.

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

const value = useMemo(() => ({ user, logout }), [user, logout]);

متى يكون الحفظ المؤقت غير ضروري

إذا كان مكوّن Provider لا يُعاد تصييره مطلقًا، مثل وجوده في أعلى الشجرة تمامًا مع عدم تغير المكوّن الأب، فإن useMemo يضيف عبئًا من دون فائدة. لا تحفظوا القيم مؤقتًا إلا عندما يُعاد تصيير Provider نفسه.

القيم البدائية مستقرة بالفعل

إذا كانت قيمة السياق بدائية، مثل سلسلة نصية أو رقم أو قيمة منطقية، فلا تحتاجون إلى useMemo — إذ تُقارَن القيم البدائية حسب القيمة لا حسب المرجع. ولن تؤدي `value={isDark}` إلى عمليات إعادة تصيير إضافية.

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

تحليل أثر الحفظ المؤقت

استخدموا React DevTools Profiler للتحقق من أن تغليف قيمة السياق داخل useMemo يقلل فعلًا من عمليات إعادة التصيير. سجّلوا جلسة قبل التغيير وبعده لمقارنة عدد عمليات الالتزام.

السياقات المتداخلة المحفوظة مؤقتًا

عند تداخل عدة سياقات، احفظوا كل سياق مؤقتًا بشكل مستقل. لن تؤثر التغييرات في أحد السياقات على القيمة المحفوظة مؤقتًا لسياق آخر.

نمط مكوّن Provider

غلّفوا السياق والحالة ومنطق الحفظ المؤقت داخل مكوّن Provider مخصص. صدّروا hook مخصصًا لاستهلاك السياق. هذا هو النمط المعتمد للسياقات القابلة لإعادة الاستخدام.

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

تحقق سريع

ما السبب الأساسي لتغليف كائن قيمة السياق داخل useMemo؟

مراجعة

غلّفوا كائنات قيم السياق داخل useMemo مع ضبط deps بشكل صحيح. حافظوا على استقرار قيم الدوال باستخدام useCallback. لا تحتاج القيم البدائية إلى الحفظ المؤقت. غلّفوا إعداد السياق داخل مكوّن Provider مع hook مخصص.

الدرس التالي: **نمط محدد السياق** — ستنفذون hook للمحدد يعيد تصيير المستهلكين فقط عند تغير جزء محدد من السياق.

الأسئلة الشائعة

هل درس «حفظ قيم السياق مؤقتًا باستخدام useMemo» مجاني؟

نعم — نص درس «حفظ قيم السياق مؤقتًا باستخدام useMemo» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «حفظ قيم السياق مؤقتًا باستخدام useMemo»؟

غلّف كائنات قيم السياق داخل useMemo لمنع إعادة تصيير المستهلكين دون داعٍ. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «حفظ قيم السياق مؤقتًا باستخدام useMemo»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى React Academy