reactjs - react 中的全局屏幕加载器

Question

我正在寻找一种在 react 中使用全局屏幕加载器的解决方案。
我不太熟悉 react 上下文，但我想知道这是否可以帮助我。
基本上我正在引入一个屏幕加载器，我想也许最好的方法是在主要组件的某个地方有一个全局加载器。所以总结一下:

我想在主要组件中拥有全局加载器

我想在应用程序中的任何地方更新全局加载程序的状态

我不想在我需要使用它的地方使用 ScreenLoaders 污染所有组件

我想为它使用钩子(Hook)

那么有没有办法在需要时使用上下文来获得 loader/loaderText 的全局状态并设置和重置？
如果有一种简单的方法可以做到，那么您认为使用这种解决方案可能有什么缺点吗？也许这对它来说太过分了。

Answer 1

创建自定义钩子(Hook)怎么样，useLoading ，可用于任何可以访问 loading 的组件中和 setLoading从全局背景？

// LoadingContext.js
import { createContext, useContext, useState } from "react";

const LoadingContext = createContext({
  loading: false,
  setLoading: null,
});

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

export function useLoading() {
  const context = useContext(LoadingContext);
  if (!context) {
    throw new Error("useLoading must be used within LoadingProvider");
  }
  return context;
}

// App.jsx
import { LoadingProvider } from "./LoadingContext";

function App() {
    return (
        <LoadingProvider>
            <RestOfYourApp />
       </LoadingProvider>
    );
}

// RestOfYourApp.js
import { useLoading } from "./LoadingContext";

function RestOfYourApp() {
    const { loading, setLoading } = useLoading();
    // ...
}