React timer-1

練習資源: https://www.instagram.com/p/CqAelTAD7bV/?utm_source=ig_web_copy_link

1 import { useState, useEffect } from "react"
這些 hook 允許元件中使用 state 和 side effects。

2 宣告名為App的元件。

export default function App() {
    const [time, setTime] = useState({
        hours: 0,
        minutes: 0,
        seconds: 0,
});

使用useState hook 建立狀態變數time，初始值是物件，setTime是更新 time狀態的函式。

{
    hours: 0,
    minutes: 0,
    seconds: 0,
}

3 useEffect(() => { ... }, [])
使用 useEffect hook 執行 side effect。這段程式碼在元件 第一次 render 時執行，因為第二個參數是空陣列，表示只有在元件第一次 mount時才執行。

4 setInterval創建一個間隔為 1 秒（1000 毫秒）的定時器。
5 使用 setTime 狀態函式來更新 time 狀態。此處使用函式更新，以確保更新是基於先前的狀態值。
6 計算新的時間值，包括秒數、分鐘和小時。並使用 % 運算符確保秒、分、時在特定範圍內。
7 return () => clearInterval(interval) 在 useEffect 中的 return 語句是一個清理函式，在元件卸載時執行，清除定時器以避免 memory leak。

 const interval = setInterval(() => {
      setTime((prevTime) => {
        const seconds = prevTime.seconds + 1;
        const minutes = prevTime.minutes + Math.floor(seconds / 60);
        const hours = prevTime.hours + Math.floor(minutes / 60);
        return {
          seconds: seconds % 60,
          minutes: minutes % 60,
          hours: hours % 24, // Ensure hours don't exceed 24
        };
      });
    }, 1000);
    return () => clearInterval(interval);

8 time.hours 狀態變數中取得小時數值。
9 .toString() 將數值轉換為字串，這是因為 padStart 方法只能應用在字串上。
10 .padStart(2, "0"): 是字串的方法之一，在字串前面填充特定字符直到字串達到指定的長度。這裡的 2 表示希望字串的長度為 2，如果字串的長度不足 2，則會在字串前填充 "0" 直到長度為 2。

{time.hours.toString().padStart(2, "0")}: 
{time.minutes.toString().padStart(2, "0")}:
{time.seconds.toString().padStart(2, "0")} //畫面顯示的時間是 字串

memory leak

"Memory leak"（内存泄漏）是指程式中的一種問題，當程式在使用記憶體時，沒有釋放或無法訪問的記憶體仍然被程式佔用。這可能導致系統的記憶體消耗持續增加，最終導致程式或系統的性能下降，甚至在嚴重情況下導致程式或系統崩潰。

Math.floor() 函式會回傳小於等於所給數字的最大整數。

console.log(Math.floor(61)); //61
console.log(Math.floor(61/60)) //1
console.log(Math.floor(0)) //0
console.log(Math.floor(-5.05))// -6

toString()

Number.prototype.toString()

let text = 124
console.log(text.toString()) //124

padStart(2, "0") padStart() 會將用給定用於填充的字串，以重複的方式，插入到目標字串的起頭(左側)，直到目標字串到達指定長度。

String.prototype.padStart()
語法: str.padStart(targetLength [, padString])
targetLength
目標字串被填充後的長度。如果此參數小於原字串的長度，那將直接返回原字串。
padString (選擇性)
用來填充的字串。如果填充字串太長，則由左側開始，擷取所需要的長度。此參數預設值是空白 " " (U+0020).
Return value
目標字串被填充到指定長度後，所得的新字串。

"abc".padStart(10);          // "       abc"
"abc".padStart(10, "foo");   // "foofoofabc"
"abc".padStart(6, "123465"); // "123abc"