react如何控制loading状态
控制Loading状态的常见方法
在React中，控制loading状态通常通过组件状态管理实现，以下是几种常用方式：
使用useState钩子
import { useState } from 'react';
function DataFetcher() {
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState(null);
const fetchData = async () => {
setIsLoading(true);
const response = await fetch('api/data');
const result = await response.json();
setData(result);
setIsLoading(false);
};
return (
<div>
{isLoading ? <p>Loading...</p> : <DisplayData data={data} />}
<button onClick={fetchData}>Load Data</button>
</div>
);
}使用自定义Hook封装
function useAsync(asyncFunction) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [result, setResult] = useState(null);
const execute = async (...args) => {
try {
setLoading(true);
const data = await asyncFunction(...args);
setResult(data);
setLoading(false);
} catch (err) {
setError(err);
setLoading(false);
}
};
return { execute, loading, error, result };
}高级状态管理方案
结合Context API
const LoadingContext = createContext();
function LoadingProvider({ children }) {
const [loadingCount, setLoadingCount] = useState(0);
const value = {
isLoading: loadingCount > 0,
startLoading: () => setLoadingCount(c => c + 1),
stopLoading: () => setLoadingCount(c => Math.max(0, c - 1))
};
return (
<LoadingContext.Provider value={value}>
{children}
</LoadingContext.Provider>
);
}Redux方案
// actions.js
export const startLoading = () => ({ type: 'START_LOADING' });
export const stopLoading = () => ({ type: 'STOP_LOADING' });
// reducer.js
export default function loadingReducer(state = false, action) {
switch(action.type) {
case 'START_LOADING': return true;
case 'STOP_LOADING': return false;
default: return state;
}
}优化用户体验的技巧
延迟显示加载指示器 快速响应时避免闪烁，可使用setTimeout延迟显示：
useEffect(() => {
const timer = setTimeout(() => {
if (isLoading) setShowLoader(true);
}, 300);
return () => clearTimeout(timer);
}, [isLoading]);骨架屏(Skeleton Screen) 在数据加载前预渲染内容轮廓：
function Skeleton() {
return (
<div className="skeleton">
<div className="skeleton-header" />
<div className="skeleton-content" />
</div>
);
}并发模式下的Suspense React 18+推荐方式：
<Suspense fallback={<Spinner />}>
<AsyncComponent />
</Suspense>
