قياس عناصر DOM باستخدام useLayoutEffect

تعيد element.getBoundingClientRect() كائنًا من النوع DOMRect يحتوي على حجم العنصر وموضعه بالنسبة إلى إطار العرض: top وright وbottom وleft وwidth وheight. وتجبر المتصفح على إجراء حساب للتخطيط لإعادة قيم دقيقة، لذا ينبغي استدعاؤها باعتدال.

إذا قرأت getBoundingClientRect() داخل useEffect، فسيكون المتصفح قد أجرى الرسم بالفعل. وإذا عيّنت الحالة بعد ذلك استنادًا إلى القياس، فسيعيد React التصيير وسيجري المتصفح الرسم مرة أخرى. وقد يرى المستخدم العنصر لفترة وجيزة في موضعه أو حجمه غير الصحيح قبل ظهور التصحيح في الرسم الثاني.

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

يحتاج التلميح إلى الظهور بالقرب من العنصر الذي يشغّله. قِس موضع العنصر المشغّل في useLayoutEffect باستخدام getBoundingClientRect()، واحسب الموضع المطلق للتلميح، ثم عيّن هذا الموضع في الحالة. وهكذا يُصيَّر التلميح في المكان الصحيح منذ أول رسم، من دون قفزة مرئية من موضع أولي غير صحيح.

لتحريك عنصر من حجمه الطبيعي غير المقيّد إلى حجم ثابت، تحتاج إلى معرفة الحجم الطبيعي قبل تطبيق القيد. اقرأ ارتفاع العنصر في useLayoutEffect قبل تطبيق أي نمط للتحريك، وخزّنه في الحالة، ثم استخدمه كقيمة إطار البداية في انتقال CSS.

عندما تحتوي الصفحة على رأس ثابت، يحتاج محتوى الصفحة إلى حشوة علوية تساوي ارتفاع الرأس حتى لا يختفي خلفه. قِس ارتفاع الرأس في useLayoutEffect باستخدام ref: headerRef.current.getBoundingClientRect().height. عيّن هذه القيمة للخاصية paddingTop في حاوية المحتوى. وبذلك يكون التخطيط صحيحًا منذ أول تصيير.

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

لا توجد عناصر DOM على الخادم، لذا قد يتسبب getBoundingClientRect() في خطأ أو يعيد أصفارًا. احمِ useLayoutEffect باستخدام فحص: if (typeof window === 'undefined') return;. وقد تحتاج تطبيقات SSR إلى إجراء hydration باستخدام حجم نائب، ثم القياس بعد hydration على العميل.

يوفر القياس لمرة واحدة باستخدام useLayoutEffect الحجم وقت التركيب. أما لتتبع تغيّرات الحجم أثناء تغيير حجم العنصر، بسبب تغيير حجم النافذة أو المحتوى الديناميكي أو تغيّرات CSS، فاستخدم ResizeObserver بدلًا منه. إذ يستدعي دالة رد اتصال كلما تغيّر حجم العنصر، مما يجعله أنسب للمكوّنات المتجاوبة.

إذا احتاجت تأثيرات متعددة إلى القياس نفسه، فاحسبه مرة واحدة وشاركه عبر context أو مرّره إلى الأسفل باعتباره props. يؤدي حساب قيمة getBoundingClientRect() نفسها في عدة استدعاءات لـ useLayoutEffect إلى إجراء قراءات تخطيط متزامنة متعددة، وكل قراءة منها مكلفة نسبيًا. لذلك ينبغي توحيد القياسات كلما أمكن.

تُملأ Refs قبل تشغيل التأثيرات. وعند تنفيذ useLayoutEffect، يُضمن أن يشير ref.current إلى عنصر DOM. ولهذا ينجح هذا النمط: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). ولا يكون ref فارغًا داخل تأثير تخطيط على مكوّن تم تركيبه.

لماذا يُفضَّل استدعاء getBoundingClientRect() داخل useLayoutEffect بدلًا من useEffect؟

استخدم getBoundingClientRect() داخل useLayoutEffect لقراءة قياسات DOM بعد التعديلات وقبل الرسم. وتؤدي تحديثات الحالة الناتجة عن هذه القياسات إلى إعادة تصيير متزامنة تُضمَّن في الرسم نفسه، مما يمنع الوميض. احمِ الشيفرة من SSR باستخدام فحص typeof window. ولتتبع تغيّر الحجم باستمرار، يُفضَّل استخدام ResizeObserver.