管理全局狀態(tài)是許多應用程序中的一項基本功能。它通常用于處理用戶登錄數(shù)據(jù)或控制應用程序主題等任務。
此外，跨頁面刷新保持狀態(tài)對于確保一致的用戶體驗至關重要。
在本文中，我將通過主題控制的實際示例演示一種使用 Context API 實現(xiàn)全局和持久狀態(tài)管理的簡單方法。

路線圖

第 1 步：創(chuàng)建 ThemeContext.tsx

在此文件中，我們創(chuàng)建 ThemeContext 來全局管理主題相關狀態(tài)。我們還定義了一個自定義鉤子 useThemeContext，以簡化對組件中上下文的訪問。

import { createContext, useContext } from "react";

// Define context type
interface ThemeContextType {
  isDarkMode: boolean;
  toggleTheme: () => void;
}

// Create context
export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// Create custom hook to access
export const useThemeContext = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};

第2步：創(chuàng)建ThemeProvider.tsx

ThemeProvider 組件為其子組件提供 ThemeContext 并處理主題狀態(tài)更改。

import React, { useState } from "react";
import { ThemeContext } from "./ThemeContext";

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleTheme = () => {
    const newTheme = !isDarkMode ? "dark" : "light";
    // Change state value
    setIsDarkMode(!isDarkMode);
    // Save value to local storage
    // Toggle "dark" class in html element
    localStorage.setItem("theme", newTheme);
    document.documentElement.classList.toggle("dark", !isDarkMode);
  };

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

第 3 步：將應用程序包裝在 ThemeProvider 中

最后，在 main.tsx 中使用 ThemeProvider 包裝 App 組件，以在整個應用程序中啟用上下文使用。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { ThemeProvider } from './context/ThemeProvider.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>,
)

步驟 4：訪問組件中的上下文值

設置上下文后，您現(xiàn)在可以訪問組件中的主題值和切換功能。

import { useThemeContext } from '@/context/ThemeContext';

function App() {
  const { isDarkMode, toggleTheme } = useThemeContext();

  return (
    <div>
      <p>isdarkMode: {isDarkMode}</p>
      <button onclick={toggleTheme}>Toggle Theme</button>
    </div>
  )
}

export default App

結論

此方法演示了如何使用 Context API 管理全局和持久狀態(tài)。您現(xiàn)在可以將此方法應用于其他用例，例如用戶身份驗證或語言設置。

以上是在 React 中使用 Context API 管理全局和持久狀態(tài)的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！