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

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

方法：

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

靜態(tài)元素實作：

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

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

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

export default Loading;

動力學：

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

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

載入文字後加入點

{".".repeat(dots)}

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

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

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

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

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

修訂方法

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

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

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

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