انتقل إلى محتوى الدرس

Counting Clicks Without Renders تتبع القيم الداخلية بصمت

تعلّم كيف يحفظ خطاف useRef القيم المتغيرة بين مرات التصيير دون التسبب في إعادة رسم المكون، مع بناء ساعة إيقاف دقيقة ومقارنة المرجع مع useState.
3 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

تتألق المراجع الصامتة كذلك في رصد إيقاع تفاعل المستخدم — مثل قياس الفارق الزمني بالمللي ثانية بين نقرتين متتاليتين أو منع الإرسال المزدوج السريع — دون إرهاق المتصفح بإعادات رسم متلاحقة لتفاصيل داخلية.

الصف 2 كود برمجي
HTML
const lastTapRef = useRef(0);
const [gapText, setGapText] = useState('Tap twice!');

function handleTap() {
  const now = Date.now();
  if (lastTapRef.current > 0) {
    setGapText((now - lastTapRef.current) + ' ms gap');
  }
  lastTapRef.current = now;
}
الصف 3 ملاحظة هامة