一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    createContext和useContext在React中的实践

    技术 90 2024-05-14 16:12

    createContextuseContext 是 React 中用于状态管理和跨组件通信的强大工具。它们适用于需要在组件树中共享状态、功能或配置的场景,而不需要通过 props 逐层传递这些数据。以下是它们的典型使用场景和具体示例。

    典型使用场景

    1. 主题管理(Theme Management):
    2. 在应用中实现主题切换(如从浅色模式切换到深色模式)。
    3. 用户认证(User Authentication):
    4. 管理用户的登录状态、用户信息等。
    5. 全局状态管理(Global State Management):
    6. 管理跨多个组件共享的状态,如购物车状态、应用语言设置等。
    7. 配置和设置(Configuration and Settings):
    8. 共享应用的全局配置,如 API 基础 URL、多语言支持等。
    9. 全局事件处理(Global Event Handling):
    10. 实现全局的事件处理,如通知系统、全局错误处理等。

    示例

    1. 主题管理

    创建上下文

    import React, { createContext, useState } from 'react';
    
    
    const ThemeContext = createContext();
    
    
    const ThemeProvider = ({ children }) => {
      const [theme, setTheme] = useState('light');
    
    
      const toggleTheme = () => {
        setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
      };
    
    
      return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
          {children}
        </ThemeContext.Provider>
      );
    };
    
    
    export { ThemeProvider, ThemeContext };
    
    
    

    消费上下文

    import React, { useContext } from 'react';
    import { ThemeProvider, ThemeContext } from './ThemeContext';
    
    
    const ThemeSwitcher = () => {
      const { theme, toggleTheme } = useContext(ThemeContext);
    
    
      return (
        <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
          <p>当前主题: {theme}</p>
          <button onClick={toggleTheme}>切换主题</button>
        </div>
      );
    };
    
    
    const App = () => (
      <ThemeProvider>
        <ThemeSwitcher />
      </ThemeProvider>
    );
    
    
    export default App;
    
    
    

    2. 用户认证

    创建上下文

    import React, { createContext, useState } from 'react';
    
    
    const AuthContext = createContext();
    
    
    const AuthProvider = ({ children }) => {
      const [user, setUser] = useState(null);
    
    
      const login = (userData) => {
        setUser(userData);
      };
    
    
      const logout = () => {
        setUser(null);
      };
    
    
      return (
        <AuthContext.Provider value={{ user, login, logout }}>
          {children}
        </AuthContext.Provider>
      );
    };
    
    
    export { AuthProvider, AuthContext };
    
    
    

    消费上下文

    import React, { useContext } from 'react';
    import { AuthProvider, AuthContext } from './AuthContext';
    
    
    const UserProfile = () => {
      const { user, logout } = useContext(AuthContext);
    
    
      if (!user) {
        return <p>请登录</p>;
      }
    
    
      return (
        <div>
          <p>欢迎, {user.name}</p>
          <button onClick={logout}>登出</button>
        </div>
      );
    };
    
    
    const Login = () => {
      const { login } = useContext(AuthContext);
    
    
      const handleLogin = () => {
        const userData = { name: '张三' }; // 模拟用户数据
        login(userData);
      };
    
    
      return <button onClick={handleLogin}>登录</button>;
    };
    
    
    const App = () => (
      <AuthProvider>
        <UserProfile />
        <Login />
      </AuthProvider>
    );
    
    
    export default App;
    
    
    

    总结

    • createContext:用于创建一个上下文对象,其提供者 Provider 组件用于将上下文值传递给子组件。
    • useContext:用于在函数组件中访问上下文值,简化了在组件树中共享数据的过程。

    通过这些工具,开发者可以在应用中轻松实现状态的集中管理和跨组件通信,从而提高代码的可维护性和可读性。


    另附一个简单理解的示例:

    创建上下文

    import React, { createContext, useState } from 'react';
    
    // 创建一个上下文
    const CounterContext = createContext();
    
    const CounterProvider = ({ children }) => {
     const [count, setCount] = useState(0);
    
     // 增加计数器的函数
     const increment = () => setCount(count + 1);
    
     // 减少计数器的函数
     const decrement = () => setCount(count - 1);
    
     return (
      // 使用 Provider 包裹子组件,并提供上下文值
      <CounterContext.Provider value={{ count, increment, decrement }}>
       {children}
      </CounterContext.Provider>
     );
    };
    
    export { CounterProvider, CounterContext };
    


    引用上下文

    import React, { useContext } from 'react';
    import { CounterProvider, CounterContext } from './CounterContext';
    
    // 创建一个消费上下文的组件
    const Counter = () => {
     const { count, increment, decrement } = useContext(CounterContext);
    
     return (
      <div>
       <p>当前计数: {count}</p>
       <button onClick={increment}>增加</button>
       <button onClick={decrement}>减少</button>
      </div>
     );
    };
    
    // 使用提供者组件包裹应用
    const App = () => (
     <CounterProvider>
      <Counter />
     </CounterProvider>
    );
    
    export default App;
    


    文章评论

    评论列表(0