import React, { useEffect, useState } from "react";
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 這是一個(gè)副作用函數(shù)，這里模擬從服務(wù)器獲取數(shù)據(jù)
    console.log("Fetching data...");
    return () => {
      // 可選的清理函數(shù)，用于在組件卸載或依賴項(xiàng)變化時(shí)清理副作用
      console.log("Cleaning up...");
    };
  }, []);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
export default MyComponent;

import React, { useEffect, useState } from "react";
const MyComponent = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    // 模擬在組件掛載后獲取數(shù)據(jù)，相當(dāng)于componentDidMount
    fetch("https://example.com/api/data")
      .then((response) => response.json())
      .then((jsonData) => setData(jsonData));
  }, []);
  return <div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>;
};
export default MyComponent;

import React, { useEffect, useState } from "react";
const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);
  useEffect(() => {
    // 當(dāng)count變化時(shí)，重新獲取數(shù)據(jù)，類似于componentDidUpdate
    if (count > 0) {
      fetch("https://example.com/api/data")
        .then((response) => response.json())
        .then((jsonData) => setData(jsonData));
    }
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
};
export default MyComponent;

import React, { useEffect, useState } from "react";
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => {
      // 組件卸載或依賴項(xiàng)變化時(shí)清除定時(shí)器，相當(dāng)于componentWillUnmount
      clearInterval(timer);
    };
  }, []);
  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
};
export default MyComponent;

import React, { useEffect, useState } from "react";
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 錯(cuò)誤：沒有將count包含在依賴項(xiàng)數(shù)組中，導(dǎo)致閉包問題
    console.log("Count:", count);
  }, []);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
export default MyComponent;

import React, { useEffect, useState } from "react";
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("Count:", count);
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
export default MyComponent;