当前位置：首页 > React

react如何控制loading状态

2026-03-31 12:29:37React

控制 Loading 状态的方法

在 React 中，可以通过多种方式控制 loading 状态，以下是常见的实现方法：

使用 useState 管理状态 通过 useState 钩子定义一个布尔值状态变量，用于表示 loading 的状态。

import { useState } from 'react';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  const fetchData = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      {isLoading ? <div>Loading...</div> : <button onClick={fetchData}>Load Data</button>}
    </div>
  );
}

使用自定义 Hook 可以封装一个自定义 Hook 来复用 loading 逻辑。

react如何控制loading状态

function useLoading() {
  const [isLoading, setIsLoading] = useState(false);

  const startLoading = () => setIsLoading(true);
  const stopLoading = () => setIsLoading(false);

  return { isLoading, startLoading, stopLoading };
}

function MyComponent() {
  const { isLoading, startLoading, stopLoading } = useLoading();

  const fetchData = async () => {
    startLoading();
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
    } catch (error) {
      console.error(error);
    } finally {
      stopLoading();
    }
  };
}

结合 Context API 如果需要在多个组件间共享 loading 状态，可以使用 Context API。

import { createContext, useContext, useState } from 'react';

const LoadingContext = createContext();

function LoadingProvider({ children }) {
  const [isLoading, setIsLoading] = useState(false);

  const value = { isLoading, setIsLoading };
  return <LoadingContext.Provider value={value}>{children}</LoadingContext.Provider>;
}

function useLoadingContext() {
  return useContext(LoadingContext);
}

function MyComponent() {
  const { isLoading, setIsLoading } = useLoadingContext();

  const fetchData = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };
}

使用第三方库 一些第三方库（如 react-query 或 swr）内置了 loading 状态管理功能。

react如何控制loading状态

import { useQuery } from 'react-query';

function MyComponent() {
  const { isLoading, data } = useQuery('fetchData', () =>
    fetch('https://api.example.com/data').then(res => res.json())
  );

  return isLoading ? <div>Loading...</div> : <div>{data}</div>;
}

优化用户体验

添加延迟加载 为了避免闪烁，可以设置一个最小 loading 时间。

const fetchData = async () => {
  const startTime = Date.now();
  setIsLoading(true);
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    const elapsedTime = Date.now() - startTime;
    if (elapsedTime < 500) {
      await new Promise(resolve => setTimeout(resolve, 500 - elapsedTime));
    }
  } catch (error) {
    console.error(error);
  } finally {
    setIsLoading(false);
  }
};

使用动画或骨架屏 替换简单的 "Loading..." 文本，提升用户体验。

import { Skeleton } from 'antd';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div>
      {isLoading ? (
        <Skeleton active />
      ) : (
        <button onClick={() => setIsLoading(true)}>Load Data</button>
      )}
    </div>
  );
}