react中useEffect Hook作用小结

import React, { useEffect, useState } from "react";
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 这是一个副作用函数，这里模拟从服务器获取数据
    console.log("Fetching data...");
    return () => {
      // 可选的清理函数，用于在组件卸载或依赖项变化时清理副作用
      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(() => {
    // 模拟在组件挂载后获取数据，相当于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(() => {
    // 当count变化时，重新获取数据，类似于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 () => {
      // 组件卸载或依赖项变化时清除定时器，相当于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(() => {
    // 错误：没有将count包含在依赖项数组中，导致闭包问题
    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;