当前位置：首页 > React

react如何控制loading状态

2026-01-24 05:00:44React

控制 Loading 状态的方法

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

使用 useState 钩子管理状态

import { useState } from 'react';

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

  const fetchData = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('api/data');
      const data = await response.json();
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      {isLoading ? <div>Loading...</div> : <div>Content</div>}
    </div>
  );
}

使用自定义 Hook 封装逻辑

function useLoading() {
  const [isLoading, setState] = useState(false);
  const load = async (promise) => {
    setState(true);
    try {
      await promise;
    } finally {
      setState(false);
    }
  };
  return [isLoading, load];
}

function MyComponent() {
  const [isLoading, load] = useLoading();

  const handleClick = () => load(fetchData());
}

结合 Context 全局管理

const LoadingContext = createContext();

function LoadingProvider({ children }) {
  const [isLoading, setIsLoading] = useState(false);
  const value = { isLoading, setIsLoading };
  return <LoadingContext.Provider value={value}>{children}</LoadingContext.Provider>;
}

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

使用第三方库 如 react-query 等库内置了 loading 状态管理：

import { useQuery } from 'react-query';

function MyComponent() {
  const { isLoading, data } = useQuery('data', fetchData);
  return isLoading ? <Spinner /> : <DataView data={data} />;
}

优化 Loading 体验的技巧

防闪烁处理 对于快速完成的请求，可以设置最小显示时间避免闪烁：

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

useEffect(() => {
  let timer;
  if (isLoading) {
    timer = setTimeout(() => setIsLoading(false), 500);
  }
  return () => clearTimeout(timer);
}, [isLoading]);

骨架屏(Skeleton)替代 比简单文字提示更友好的加载方式：

{isLoading ? <Skeleton height={100} /> : <RealContent />}

按需加载组件 配合 React.lazy 实现组件级加载：

const LazyComponent = lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <LazyComponent />
    </Suspense>
  );
}

react如何控制loading状态