تسلط بر تایمر در React: راهنمای جامع توسعه دهنده

اگر شما تفاوت های ظریف را در نظر نگیرید ، تایمرهای موجود در واکنش می توانند مشکل باشند. بیایید نحوه استفاده صحیح از تایمرها ، جلوگیری از نشت حافظه و مشکلات بسته شدن و بررسی بهترین روشها را بررسی کنیم.

اصول اصلی کار با تایمرها

هنگام کار با تایمرها در React ، لازم است در نظر گرفته شود:

• تمیز کردن منابع هنگامی که یک مؤلفه از بین می رود.
• رسیدگی به بسته شدن صحیح.
• مدیریت تغییرات حالت مؤلفه.

چرا useEffect وت useRef برای تایمرها مهم هستند

ترکیبی از useEffect وت useRef موضوعات مهم را که در اجرای تایمر ساده لوحانه بوجود می آیند ، حل می کند.

نقش useEffect

useEffect چرخه عمر تایمر را مدیریت می کند:

• هنگامی که مؤلفه تغییر می کند یا وابستگی ها تغییر می کند ، فاصله جدیدی ایجاد می کند.
• تضمین می کند که هنگام تغییر وابستگی ها یا عدم شمارش اجزای ، فاصله از فاصله زمانی پاک می شود و از تایمرهای تکراری جلوگیری می کند.

قدرت useRef

useRef دو کارکرد کلیدی را ارائه می دهد:

• شناسه فاصله را برای پاکسازی بعدی ذخیره می کند.
• دسترسی به آخرین نسخه عملکرد پاسخ به تماس را تضمین می کند و از مشکلات مربوط به بسته شدن جلوگیری می کند.

اجرای یک عرف useInterval قلاب

در اینجا اجرای یک بازه جهانی با مکث و عملکرد رزومه وجود دارد:

import { useEffect, useRef, useState } from 'react';

export const useInterval = (callback: () => void, interval = 1000) => {
  const [active, setActive] = useState(true);
  const intervalIdRef = useRef>();
  const callbackRef = useRef(callback);

  // Update the reference to the latest callback
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    if (!active) return;

    intervalIdRef.current = setInterval(() => callbackRef.current(), interval);

    return () => clearInterval(intervalIdRef.current);
  }, [active, interval]);

  return {
    active,
    pause: () => setActive(false),
    resume: () => setActive(true),
    toggle: () => setActive(prev => !prev)
  };
};

تجزیه کد

1. به روزرسانی پاسخ به تماس: useRef مرجع عملکرد را ذخیره می کند و از مشکلات بسته شدن جلوگیری می کند.
2. کنترل حالت تایمر: active آیا بازه در حال اجرا یا مکث است.
3. تمیز کردن فاصله: useEffect تضمین کردن clearInterval(intervalIdRef.current); از نشت حافظه جلوگیری می کند.

پیاده سازی های تایمر جایگزین

تایمر یک بار با useTimeout

برای یک تایمر که فقط یک بار اجرا می شود ، استفاده کنید useTimeout:

import { useEffect, useRef } from 'react';

export const useTimeout = (callback: () => void, delay: number) => {
  const callbackRef = useRef(callback);

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    const timer = setTimeout(() => callbackRef.current(), delay);
    return () => clearTimeout(timer);
  }, [delay]);
};

پایان

تایمرهای موجود در React نیاز به یک رویکرد متفکرانه دارند: مدیریت چرخه عمر آنها ، بسته شدن بسته شدن و جلوگیری از نشت حافظه. استفاده کردن useRef وت useEffect برای عملکرد تایمر قوی و برای سناریوهای پیچیده ، کتابخانه های به خوبی آزمایش شده را در نظر بگیرید که مدیریت تایمر بهینه شده را ارائه می دهند.

برای بینش بیشتر در مورد مدیریت تایمر جاوا اسکریپت ، این راهنما را بررسی کنید.