在React應用中如何有效管理全局loading狀態

在React應用中，可以通過使用Context API和useState來有效管理全局loading狀態。以下是實現全局loading狀態管理的一種方法：

1. 創建一個LoadingContext組件來存儲loading狀態，并提供一個用于更新loading狀態的函數。

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

const LoadingContext = createContext();

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

  const setLoading = (isLoading) => {
    setIsLoading(isLoading);
  };

  return (
    <LoadingContext.Provider value={{ isLoading, setLoading }}>
      {children}
    </LoadingContext.Provider>
  );
};

export const useLoading = () => {
  const context = useContext(LoadingContext);

  if (!context) {
    throw new Error('useLoading must be used within a LoadingProvider');
  }

  return context;
};

2. 在應用的根組件中使用LoadingProvider組件包裹所有子組件。

import React from 'react';
import { LoadingProvider } from './LoadingContext';
import App from './App';

const Root = () => {
  return (
    <LoadingProvider>
      <App />
    </LoadingProvider>
  );
};

export default Root;

3. 在需要顯示loading狀態的組件中使用useLoading hook來獲取loading狀態和更新loading狀態的函數。

import React from 'react';
import { useLoading } from './LoadingContext';

const MyComponent = () => {
  const { isLoading, setLoading } = useLoading();

  const handleClick = () => {
    setLoading(true);

    // 模擬異步操作
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  };

  return (
    <div>
      {isLoading ? <p>Loading...</p> : null}
      <button onClick={handleClick}>Start Loading</button>
    </div>
  );
};

export default MyComponent;

通過以上方法，可以在React應用中有效管理全局loading狀態，并在需要的地方顯示loading狀態，提升用戶體驗。