react将setTimeout添加到加载

setTimeout(() => {
  console.log('This will be logged after 3 seconds.');
}, 3000);

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

function LoadingComponent() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 设置一个3秒的定时器
    const timer = setTimeout(() => {
      setIsLoading(false); // 3秒后改变加载状态
    }, 3000);

    // 清除定时器以避免内存泄漏
    return () => clearTimeout(timer);
  }, []); // 空依赖数组确保这个effect只在组件挂载时运行一次

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <p>Data has been loaded!</p>
      )}
    </div>
  );
}

export default LoadingComponent;

useEffect(() => {
  const timer = setTimeout(() => {
    setIsLoading(false);
  }, 3000);

  return () => clearTimeout(timer); // 组件卸载时清除定时器
}, []);