Mounted（掛載）：元件首次渲染到 DOM 中。
Update（更新）：元件的狀態或 props 改變，觸發重新渲染。
UnMounted（卸載）：元件從 DOM 中移除。

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // 模擬 Mounted 和 UnMounted
  useEffect(() => {
    console.log('元件已掛載 (Mounted)');
    
    // 回傳一個函式，當元件卸載時執行
    return () => {
      console.log('元件已卸載 (UnMounted)');
    };
  }, []); // 空的依賴陣列，表示只會在掛載和卸載時觸發

  // 模擬元件更新 (Update)
  useEffect(() => {
    console.log('元件更新了 (Update) - Count:', count);
  }, [count]); // 依賴 count，count 改變時觸發更新

  return (
    <div>
      <p>目前數字：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加數字</button>
    </div>
  );
}

export default MyComponent;