استخدام useLayoutEffect للقياسات قبل التحريك

قد يقفز العنصر أحيانًا أو يومض بشكل واضح عند عرضه للمرة الأولى، قبل أن يستقر في موضعه. يحدث ذلك عادةً عندما تقيسون العنصر أو تعيدون وضعه بعد أن يكون المتصفح قد رسمه بالفعل.

يرى المستخدم الموضع الخاطئ لإطار واحد، ثم يشاهد تصحيحًا مفاجئًا، مما يجعل الواجهة تبدو معطلة.

يُشغّل المتصفح useEffect بعد أن يرسم الصفحة. لذلك، إذا قرأتم قياسًا وحدّثتم DOM داخل useEffect، فسيكون المستخدم قد رأى الإطار غير المصحح قبل تطبيق التغيير.

وبالنسبة إلى التموضع المرئي الذي يجب أن يكون غير ملحوظ للمستخدم، يكون التوقيت بعد الرسم متأخرًا جدًا.

يُشغّل React useLayoutEffect بشكل متزامن بعد تعديل DOM، ولكن قبل أن يرسم المتصفح الصفحة. وتُطبّق أي قراءة أو كتابة لـ DOM تجرونها هناك قبل أن يرى المستخدم أي إطار.

لذلك فهو الأداة المناسبة للقياسات والتموضع اللذين يجب أن يظهرا صحيحين فورًا.

داخل useLayoutEffect، يمكنكم قراءة تخطيط العنصر باستخدام ref.current.getBoundingClientRect() لالتقاط موضعه وحجمه قبل تحريكه.

وبما أن ذلك يحدث قبل الرسم، يمكنكم إجراء القياس وتطبيق تحويل ابتدائي من دون أي وميض مرئي.

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

يتيح لكم ذلك تحريك تغييرات التخطيط باستخدام transform منخفض التكلفة فقط، رغم أن التخطيط الحقيقي قد تغيّر فورًا.

تحدث القراءات الأساسية داخل useLayoutEffect: التقطوا المستطيل الأول قبل التغيير والمستطيل الأخير بعده، ثم احسبوا الفرق بينهما. ويضمن إجراء ذلك قبل الرسم وجود التحويل العاكس قبل عرض أي شيء.

يمنحكم الفرق بين المستطيلين قيمتي الإزاحة والتكبير الدقيقتين اللازمتين للعكس.

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

وبما أن العكس طُبّق قبل الرسم، فلن يرى المستخدم العنصر أبدًا في موضعه الأخير الخام.

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

يشير هذا التحذير إلى أن التأثير لا يمكنه العمل في مكان لا يوجد فيه ما يمكن قياسه.

إذا كان يجب تشغيل مكوّن على الخادم، فاستخدموا useEffect مع requestAnimationFrame لإجراء القياس قبل الرسم التالي، أو استخدموا useLayoutEffect بشكل مشروط في المتصفح فقط.

يتجنب ذلك التحذير، مع الحفاظ على توقيت قريب من مرحلة ما قبل الرسم للحركات غير الحرجة.

تُعد حركة الارتفاع حالة شائعة: قيسوا الارتفاعين المطوي والموسّع داخل useLayoutEffect، ثم حرّكوا بين قيم صريحة بالبكسل لكي تكون الانتقالية سلسة.

وبما أن الارتفاع auto لا يمكن تحريكه، فإن قياس الارتفاع الحقيقي أولًا يتيح لكم الانتقال إلى رقم محدد.

استخدموا useEffect افتراضيًا لمعظم المهام. ولا تستخدموا useLayoutEffect إلا عندما تقرؤون التخطيط ويجب عليكم تعديل DOM قبل الرسم لتجنب وميض مرئي.

قد يؤدي الإفراط في استخدامه إلى الإضرار بالأداء، لأنه يحجب الرسم حتى يكتمل.

اختبروا مدى فهمكم لتوقيت التأثيرات.

تعلّمتم أن مشكلة الوميض تنتج عن إجراء القياس بعد الرسم، وأن useLayoutEffect يُشغّل قبل الرسم، وكيف تستخدم تقنية FLIP التحويلات منخفضة التكلفة لتحريك تغييرات التخطيط.

كما تعرّفتم إلى تحذير SSR وإلى البديل الذي يجمع بين useEffect وrequestAnimationFrame.