react如何控制loading状态
控制 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>
);
}
