提供一些使用Context+useContext进行跨层级组件通信的具体示例

// 1. 创建主题Context
import { createContext, useContext, useState } from 'react';

// 创建Context时可设置默认值（非必填）
const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {}
});

// 2. 提供主题数据的顶层组件（Provider）
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  // 切换主题的方法
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  // 提供给后代组件的数据（包含状态和方法）
  const value = { theme, toggleTheme };

  return (
    <ThemeContext.Provider value={value}>
      {children} {/* 后代组件会包裹在这里 */}
    </ThemeContext.Provider>
  );
}

// 3. 自定义Hook简化使用（可选，推荐）
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

// 4. 深层子组件使用（跨层级获取）
function ThemedButton() {
  // 直接获取主题配置，无需通过props传递
  const { theme, toggleTheme } = useTheme();

  return (
    <button 
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#333' : '#fff',
        padding: '8px 16px',
        border: '1px solid #ccc'
      }}
      onClick={toggleTheme}
    >
      当前主题：{theme}（点击切换）
    </button>
  );
}

// 5. 组件嵌套关系（跨3层）
function App() {
  return (
    <ThemeProvider>
      <div>
        <h1>主题示例</h1>
        <ParentComponent />
      </div>
    </ThemeProvider>
  );
}

function ParentComponent() {
  return <ChildComponent />; // 中间层无需处理主题数据
}

function ChildComponent() {
  return <ThemedButton />; // 深层组件直接使用
}

// 1. 创建用户Context
import { createContext, useContext, useState } from 'react';

const UserContext = createContext(null);

// 2. 用户Provider
export function UserProvider({ children }) {
  const [user, setUser] = useState({
    name: '游客',
    isLogin: false
  });

  // 登录/退出方法
  const login = (username) => {
    setUser({ name: username, isLogin: true });
  };

  const logout = () => {
    setUser({ name: '游客', isLogin: false });
  };

  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
}

// 3. 自定义Hook
export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

// 4. 深层组件使用（如导航栏、个人中心）
function Navbar() {
  const { user, logout } = useUser();
  return (
    <nav style={{ padding: '10px', background: '#f0f0f0' }}>
      <span>欢迎，{user.name}</span>
      {user.isLogin ? (
        <button onClick={logout} style={{ marginLeft: '10px' }}>
          退出
        </button>
      ) : null}
    </nav>
  );
}

function LoginButton() {
  const { user, login } = useUser();
  if (user.isLogin) return null;
  return (
    <button onClick={() => login('张三')}>
      登录
    </button>
  );
}

// 5. 组件层级（跨4层）
function App() {
  return (
    <UserProvider>
      <Navbar />
      <Content />
    </UserProvider>
  );
}

function Content() {
  return <ProfileSection />;
}

function ProfileSection() {
  return <LoginButton />;
}

// 组合示例：同时使用ThemeContext和UserContext
function App() {
  // 多层Provider嵌套，分别提供不同数据
  return (
    <ThemeProvider>
      <UserProvider>
        <Layout />
      </UserProvider>
    </ThemeProvider>
  );
}

function Layout() {
  return <DeepComponent />;
}

function DeepComponent() {
  // 同时使用两个Context的数据
  const { theme } = useTheme();
  const { user } = useUser();

  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
      <p>用户：{user.name}</p>
      <p>主题：{theme}</p>
    </div>
  );
}

// 在Provider中优化
const value = useMemo(() => ({ theme, toggleTheme }), [theme]);