مآزق وأنماط الحفظ عن بعد

في الدروس السابقة، تناولناuseMemo ،useCallback ، وReact.memo كأدوات دفاعية، وتقنيات لحماية المكونات من العمل غير الضروري. في هذا الدرس، نغير المنظور: التخزين المؤقت هو تكلفة، وما لم تكن البنية المحيطة به مستقرة، فإن هذه التكلفة تصبح أكبر من العمل الذي كان من المفترض توفيره.

معادلة التكلفة

في كل مرة تستخدم فيهاuseMemo تدفع React ثلاث ضرائب لا مفر منها:

• تكلفة الذاكرة: يقوم React بتخصيص الذاكرة قيمة المخزنة مؤقتًا وقائمة التبعيات التي يجب عليه تتبعها.

• تكلفة وحدة المعالجة المركزية: في كل محاولة عرض، سواء كانت مُلتزمة أو تجريبية، يُجري React مقارنة سطحية للتبعيات. في ظل مُعالج العرض المتزامن في React 19، تحدث عمليات العرض التجريبية بشكل متكرر، مما يزيد من هذه التكلفة.

• تكلفة التعقيد: يمكن أن تؤدي عمليات الإغلاق القديمة، ومصفوفات التبعية غير الصحيحة، وهويات المصدر غير المستقرة إلى إبطال المذكرة بصمت، مما يتركك مع عبء إضافي ولكن بدون أي فائدة.

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

لا يُعدّ التخزين المؤقت مجانيًا. بالنسبة للعمليات البسيطة، والحسابات البسيطة، ومرشحات المصفوفات الصغيرة، والحسابات الخفيفة، فإنّ عبء مقارنة التبعيات هو المهيمن.

لماذا تفشل عملية التخزين المؤقت في تطبيقات React الحقيقية

لا تفشل عملية التخزين المؤقت عادةً داخل المكون الذي يتم تخزينه مؤقتًا؛ بل تفشل لأن البنية المحيطة به تنتهك الافتراضات التي تعتمد عليها عملية التخزين المؤقت.

• تتسبب العناصر الأبوية غير المستقرة في تجاوز حدود الذاكرة المؤقتة: تنشأ معظم حالات فشل الذاكرة المؤقتة من العنصر الأب، وليس من العنصر الابن المُخزَّن مؤقتًا. إذا أعاد العنصر الأب إنشاء الكائنات أو ...