Melaksanakan keadaan pemuatan asas

Bagaimanakah anda membuat keadaan pemuatan asas menggunakan cangkuk html, javascript dan reactjs?

Keperluan:
1) Komponen berfungsi bertindak balas.
2) Ia sepatutnya hanya mengembalikan teks pemuatan: "Memuatkan".
3) Tunjukkan titik yang ditambah secara berperingkat ( 1) ke penghujung teks pemuatan setiap saat.
Contohnya:
Memuatkan. -1s- Memuatkan.. -1s- Memuatkan... -1s- Memuatkan

Pendekatan:

Tentukan elemen statik. Kemudian tambahkan dinamik (keadaan, cangkuk dll). Mengikut pemikiran dalam React doc.

Pelaksanaan elemen statik:

1) Buat komponen berfungsi yang mengembalikan "Memuatkan".

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

  return (
    <div>
      <h2 id="loadingText">{loadingText}</h2>
    </div>
  );
};

export default Loading;

Dinamik:

1) Bilangan titik mewakili keadaan komponen. Jadi, takrifkan pembolehubah keadaan menggunakan useState.

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

Dan tambahkan titik selepas memuatkan teks

{".".repeat(dots)}

2) Keadaan berubah secara automatik selepas setiap saat. window.setInterval boleh melaksanakan tugas ini. Biarkan fungsi panggil balik kosong buat masa ini.

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

3) Cipta cangkuk useEffect yang hanya berjalan sekali selepas pemaparan awal.

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

Sehingga kini, apl hanya menunjukkan "Memuatkan.".
Jeda dan fikirkan logik di dalam window.setInterval fungsi panggil balik.

Penyelesaian yang kelihatan jelas:

setDots((dots + 1) % 4);

Namun, ia salah. Komponen hanya akan pergi dari
"Memuatkan."-1s-"Memuatkan..". Kemudian ia akan tersangkut.

Sebab: Panggilan balik fn useEffect dicetuskan pada keadaan awal titik (1). Sebarang kemas kini dalam pembolehubah titik tidak menjejaskan penutupan panggilan balik fn useEffect.

Catch-1: Memasukkan titik dalam tatasusunan kebergantungan useEffect tidak masuk akal. Kerana kemudian ia memanggil window.setInterval pada setiap kemas kini keadaan titik. (Boleh menggunakan window.setTimeout sebaliknya. Tetapi mengapa?)

Catch-2: Keadaan titik komponen Memuat harus bergantung pada useEffect dan window.setInterval. Walau bagaimanapun, menggunakan titik secara langsung dalam useEffect menjadikan useEffect bergantung padanya.

Sebelum pergi ke langkah seterusnya, fikirkan tentang Penutupan.

Pendekatan yang disemak semula

Tentukan keadaan titik panggilan balik useEffect sendiri (katakan effectDots). Fungsi panggil balik window.setInterval menambah effectDots dan juga menetapkan keadaan titik Komponen Memuatkan.
(Kuncinya adalah untuk mengubah kebergantungan daripada setInterval -> keadaan titik komponen kepada keadaan titik komponen -> setInterval. )

Versi pindaan fungsi panggil balik useEffect dan window.setInterval dengan effect keadaan setempatDots:

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

Atas ialah kandungan terperinci Melaksanakan keadaan pemuatan asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!