在 React 中使用 Context API 管理全局和持久状态

管理全局状态是许多应用程序中的一项基本功能。它通常用于处理用户登录数据或控制应用程序主题等任务。
此外，跨页面刷新保持状态对于确保一致的用户体验至关重要。
在本文中，我将通过主题控制的实际示例演示一种使用 Context API 实现全局和持久状态管理的简单方法。

路线图

第 1 步：创建 ThemeContext.tsx

在此文件中，我们创建 ThemeContext 来全局管理主题相关状态。我们还定义了一个自定义钩子 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步：创建ThemeProvider.tsx

ThemeProvider 组件为其子组件提供 ThemeContext 并处理主题状态更改。

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：访问组件中的上下文值

设置上下文后，您现在可以访问组件中的主题值和切换功能。

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 管理全局和持久状态。您现在可以将此方法应用于其他用例，例如用户身份验证或语言设置。

以上是在 React 中使用 Context API 管理全局和持久状态的详细内容。更多信息请关注PHP中文网其他相关文章！