實現基本的載入狀態

如何使用 html、javascript 和 Reactjs 掛鉤建立基本載入狀態？

要求：
1) React 函數元件。
2）它應該只返回加載文字：“Loading”。
3) 顯示每秒增量新增至載入文字末端的點 (1)。
例如：
載入中. -1s- 正在加載.. -1s- 正在加載... -1s- 正在加載

方法：

確定靜態元素。然後加入動態（狀態、鉤子等）。按照 React 文檔中的思路。

靜態元素實作：

1) 建立一個傳回「Loading」的功能元件。

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

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

export default Loading;

動力學：

1) 點的數量代表組件的狀態。因此，使用 useState 定義一個狀態變數。

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

載入文字後加入點

{".".repeat(dots)}

2) 狀態每秒自動改變。 window.setInterval 可以執行此任務。暫時將回調函數留空。

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 的回呼 fn 在點的初始狀態 (1) 上觸發。 dots變數的任何更新都不會影響useEffect回呼fn的關閉。

Catch-1：在 useEffect 的依賴數組中包含點是沒有意義的。因為這樣它就會在每次更新點狀態時呼叫 window.setInterval 。 （可以用window.setTimeout代替。但是為什麼呢？）

Catch-2：Loading 元件的點狀態應該依賴 useEffect 和 window.setInterval。但是，直接在 useEffect 中使用點會使 useEffect 依賴它。

在進行下一個步驟之前，請先考慮一下閉包。

修訂方法

定義useEffect回呼自己的點狀態（例如effectDots）。 window.setInterval 的回呼函數會增加effectDots 的值，並設定載入元件的點狀態。
（關鍵是將依賴關係從 setInterval -> 元件的點狀態變更為元件的點狀態 -> setInterval。）

useEffect 和 window.setInterval 回呼函數的修訂版本，具有本地狀態effectDots：

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

以上是實現基本的載入狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！