اجرای یک حالت بارگذاری اولیه

چگونه با استفاده از قلاب های html، javascript و reactjs یک حالت بارگذاری اولیه ایجاد می کنید؟

الزامات:
1) مولفه عملکردی واکنش نشان دهید.
2) فقط باید متن بارگیری را برگرداند: “Loading”.
3) نقطه هایی را که به صورت تدریجی (+1) به انتهای متن بارگذاری اضافه می شوند، هر ثانیه نشان دهید.
به عنوان مثال:
Loading. -1s- Loading.. -1s- Loading... -1s- Loading

رویکرد:

عناصر استاتیک را تعیین کنید. سپس دینامیک (حالت ها، قلاب ها و غیره) را اضافه کنید. طبق تفکر React doc.

اجرای المان استاتیک:

1) یک مؤلفه کاربردی ایجاد کنید که “Loading” را برمی گرداند.

const Loading = () => {
  const loadingText = "Loading";

  return (
    

      
{loadingText}
    

  );
};

export default Loading;

دینامیک:

1) تعداد نقاط نشان دهنده وضعیتی از جزء است. بنابراین، با استفاده از متغیر حالت تعریف کنید useState.

const [dots, setDots] = useState(1);

و پس از بارگذاری متن، نقطه ها را اضافه کنید

{".".repeat(dots)}

2) یک حالت به طور خودکار پس از هر ثانیه تغییر می کند. window.setInterval می تواند این وظیفه را انجام دهد. فعلاً تابع callback را خالی بگذارید.

window.setInterval(() => {
      // Logic to increment dots
    }, 1000);

3) ایجاد یک useEffect هوکی که فقط یک بار پس از رندر اولیه اجرا می شود.

useEffect(() => {
    window.setInterval(() => {
      // Logic to increment dots
    }, 1000);
  }, []);

تا به حال، برنامه فقط “بارگیری” را نشان می دهد.
کمی مکث کنید و به منطق درون فکر کنید window.setInterval عملکرد برگشت به تماس

راه حل آشکار:

setDots((dots + 1) % 4);

با این حال، اشتباه است. جزء فقط از
“بارگیری.”-1s-“بارگیری….” سپس گیر می کند.

دلیل: را useEffect's پاسخ تماس fn در حالت اولیه نقاط (1) فعال می شود. هر گونه به روز رسانی در متغیر نقطه تاثیری بر بسته شدن ندارد useEffect's پاسخ به تماس fn.

Catch-1: گنجاندن نقطه در آرایه وابستگی useEffect معنی ندارد. زیرا پس از آن آن را صدا می کند window.setInterval در هر به روز رسانی وضعیت نقاط. (قابل استفاده است window.setTimeout در عوض اما چرا؟)

گرفتن-2: وضعیت نقاط مولفه بارگیری باید به آن وابسته باشد useEffect و window.setInterval. با این حال، با استفاده از نقطه به طور مستقیم در useEffect باعث می شود useEffect به آن وابسته باشد.

قبل از رفتن به مرحله بعدی، در مورد بسته شدن فکر کنید.

رویکرد تجدید نظر شده

تعریف کنید useEffect's callback's own dots state (say effectDots). را window.setIntervalتابع فراخوانی را افزایش می دهد effectDots و همچنین Loading Component را تنظیم می کند dots دولت
(کلید این است که وابستگی را تغییر دهید setInterval -> component's dots state به component's dots state -> setInterval. )

نسخه اصلاح شده توابع پاسخ به تماس useEffect و window.setInterval با یک ایالت محلی effectDots:

  useEffect(() => {
    let effectDots = 1;
    window.setInterval(() => {
      // increment, modulo 4
      // set the Loading component's state
      setDots(effectDots++ % 4);
    }, 1000);
  }, []);