React相邻组件依赖注入与状态共享：无状态管理库实现方案

首先纠正一个误解：React的useContext并非仅适用于父子组件，它可以在任何被同一Context Provider包裹的组件间共享状态，包括你所说的这种由同一父组件（App）承载的“相邻组件”（Header、Login）。不需要依赖Redux这类状态管理库，用React原生的Context API就能实现需求，以下是具体实现步骤：

1. 创建共享上下文（Context） #

首先创建一个独立的Context文件，封装状态和操作方法：

// AuthContext.js
import { createContext, useContext, useState } from 'react';

// 创建上下文
const AuthContext = createContext();

// 自定义Provider组件，负责管理状态
export function AuthProvider({ children }) {
  // 共享的登录状态
  const [user, setUser] = useState(null);

  // 登录方法
  const login = (userData) => {
    setUser(userData);
  };

  // 登出方法
  const logout = () => {
    setUser(null);
  };

  // 将状态和方法通过value传递给子组件
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook，简化Context的调用
export function useAuth() {
  return useContext(AuthContext);
}

2. 在父组件中注入Context #

修改App组件，用AuthProvider包裹所有需要共享状态的组件（Header、路由内的组件）：

// App.js
import { AuthProvider } from './AuthContext';
import Header from './Header';
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import Login from './Login';

function App() {
  return (
    <AuthProvider>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </AuthProvider>
  );
}

3. 在Login组件中更新状态 #

在Login组件中通过自定义HookuseAuth获取登录方法，更新共享状态：

// Login.js
import { useAuth } from './AuthContext';

function Login() {
  const { login } = useAuth();

  const handleLogin = () => {
    // 模拟登录接口返回的用户数据
    const mockUser = { name: 'Caleb', email: 'caleb@example.com' };
    login(mockUser);
  };

  return (
    <div>
      <h2>登录页</h2>
      <button onClick={handleLogin}>点击登录</button>
    </div>
  );
}

4. 在Header组件中访问状态 #

在Header组件中同样通过useAuth获取共享状态，实现状态展示和登出操作：

// Header.js
import { useAuth } from './AuthContext';

function Header() {
  const { user, logout } = useAuth();

  return (
    <header style={{ padding: '1rem', background: '#f5f5f5' }}>
      <h1>我的应用</h1>
      <div>
        {user ? (
          <>
            <span>欢迎，{user.name}</span>
            <button onClick={logout} style={{ marginLeft: '1rem' }}>登出</button>
          </>
        ) : (
          <span>请登录</span>
        )}
      </div>
    </header>
  );
}

方案说明 #

• Context API的核心作用就是跨组件层级传递数据，并非局限于父子关系，只要组件被同一Provider包裹，就能获取到上下文数据。
• 对比状态提升到App组件的方案：当需要共享状态的组件增多、层级变复杂时，Context可以避免频繁的props透传，代码更易维护。
• 这种原生方案完全可以替代Redux在简单跨组件状态共享场景下的作用，无需额外引入第三方库。

内容的提问来源于stack exchange，提问作者Caleb