当前位置：首页 > React

react如何等待页面加载完成

2026-01-25 20:00:44React

等待页面加载完成的方法

在React中，可以通过多种方式确保页面或组件加载完成后再执行操作。以下是几种常见的方法：

使用useEffect钩子

useEffect是React中最常用的方法之一，可以在组件挂载后执行代码：

useEffect(() => {
  // 这里的代码会在组件挂载后执行
  console.log('组件已加载完成');
}, []); // 空依赖数组表示只在组件挂载时执行

监听特定状态变化

当需要等待某些数据加载完成时，可以监听状态变化：

react如何等待页面加载完成

const [data, setData] = useState(null);

useEffect(() => {
  if (data) {
    // 数据加载完成后执行的操作
    console.log('数据已加载', data);
  }
}, [data]);

使用window.onload事件

对于整个页面的加载，可以使用原生JavaScript的onload事件：

useEffect(() => {
  window.addEventListener('load', () => {
    console.log('整个页面已加载完成');
  });

  return () => {
    window.removeEventListener('load');
  };
}, []);

异步数据加载

react如何等待页面加载完成

当需要等待异步操作完成时，可以使用async/await：

useEffect(() => {
  const fetchData = async () => {
    const result = await someAsyncFunction();
    console.log('异步操作已完成', result);
  };

  fetchData();
}, []);

使用加载状态

通过维护一个加载状态，可以在UI中显示加载指示器：

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

useEffect(() => {
  // 模拟数据加载
  setTimeout(() => {
    setIsLoading(false);
  }, 2000);
}, []);

return isLoading ? <div>加载中...</div> : <div>内容已加载</div>;

第三方库解决方案

对于更复杂的需求，可以考虑使用如react-query或swr等库，它们提供了更完善的数据加载和状态管理机制。