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>