你的 React 应用真的需要依赖注入吗？深度对标 3 种架构方案

App（持有用户信息、主题等全局状态）
  ├─ Sidebar（不需要用户信息）
  │   └─ Navigation（也不需要）
  │       └─ UserMenu（终于需要了！）
  │
  └─ MainContent（需要主题）
      └─ Page（也需要主题）
          └─ Card（还是需要主题）
              └─ Button（最终使用）

// App.js
function App() {
const [user, setUser] = useState({ name: 'Alice' });
const [theme, setTheme] = useState('light');

return (
    <Sidebar user={user} />
    <MainContent theme={theme} />
  );
}

// Sidebar.js
function Sidebar({ user }) {
return<Navigation user={user} />;
}

// Navigation.js
function Navigation({ user }) {
return<UserMenu user={user} />;
}

// UserMenu.js 才是真正需要 user 的组件
function UserMenu({ user }) {
return<div>Hi, {user.name}</div>;
}

import React, { createContext, useContext, useState } from'react';

// 第一步：创建 Context
const ThemeContext = createContext();

// 第二步：创建 Provider（提供者）
exportfunction ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

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

// 第三步：自定义 Hook（使用者）
exportfunction useTheme() {
const context = useContext(ThemeContext);
if (!context) {
    thrownewError('useTheme 必须在 ThemeProvider 内使用');
  }
return context;
}

// 无论嵌套多深，直接用 Hook
function Button() {
  const { theme, toggleTheme } = useTheme();
  return (
    <button 
      style={{ background: theme === 'light' ? '#fff' : '#222' }}
      onClick={toggleTheme}
    >
      Current: {theme}
    </button>
  );
}

// 定义一个 Logger 服务
class Logger {
  log(message) {
    console.log(`[LOG] ${message}`);
  }
}

// 创建 LoggerContext
const LoggerContext = createContext(null);

// Provider：注入 Logger 实例
exportfunction LoggerProvider({ logger = new Logger(), children }) {
return (
    <LoggerContext.Provider value={logger}>
      {children}
    </LoggerContext.Provider>
  );
}

// Custom Hook：消费 Logger
exportfunction useLogger() {
const logger = useContext(LoggerContext);
if (!logger) {
    thrownewError('useLogger 必须在 LoggerProvider 内使用');
  }
return logger;
}

// Dashboard 不需要关心 Logger 怎么创建，直接用
function Dashboard() {
  const logger = useLogger();
  
  useEffect(() => {
    logger.log('Dashboard mounted');
  }, [logger]);
  
  return <h1>Dashboard</h1>;
}

// 测试代码
const mockLogger = {
  log: jest.fn()
};

render(
  <LoggerProvider logger={mockLogger}>
    <Dashboard />
  </LoggerProvider>
);

expect(mockLogger.log).toHaveBeenCalledWith('Dashboard mounted');

// 创建服务容器
const ServiceContext = createContext(null);

// 定义一堆服务
const services = {
logger: {
    log: (msg) =>console.log(`[LOG] ${msg}`)
  },
analytics: {
    track: (event) =>console.log(`[Analytics] ${event}`)
  },
auth: {
    login: (user) =>console.log(`Logging in ${user}`)
  }
};

// Provider：一次性注入所有服务
exportfunction ServiceProvider({ services, children }) {
return (
    <ServiceContext.Provider value={services}>
      {children}
    </ServiceContext.Provider>
  );
}

// 消费 Hook：取出需要的服务
exportfunction useService(serviceName) {
const services = useContext(ServiceContext);
if (!services || !services[serviceName]) {
    thrownewError(`Service "${serviceName}" not found`);
  }
return services[serviceName];
}

// Dashboard 需要 logger 和 analytics
function Dashboard() {
const logger = useService('logger');
const analytics = useService('analytics');

const handleClick = () => {
    analytics.track('dashboard_click');
    logger.log('Click tracked');
  };

return<button onClick={handleClick}>Click me</button>;
}

你的应用需要共享什么？
    │
    ├─ UI 状态（主题、语言、显示/隐藏）
    │   └─ 用 Context API ✅
    │       （简单直接，性能影响小）
    │
    ├─ 服务类（Logger、API 客户端、Auth）
    │   └─ 需要频繁 Mock 测试吗？
    │       ├─ 是 → 用依赖注入（DI）✅
    │       │       （测试友好，易于维护）
    │       │
    │       └─ 否 → Service Locator ✅
    │               （集中管理多个服务）
    │
    └─ 频繁变化的状态（表单、搜索结果）
        └─ 不要用这些方案，用 Redux/Zustand/Jotai ⚠️
            （这是它们的用武之地）

// 第一步：用 Context API 处理 UI 状态
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
// ...
return<ThemeContext.Provider value={{theme, setTheme}}>{children}</ThemeContext.Provider>;
};

// 第二步：用 DI 注入必要的服务（易于测试）
const loggerService = {
log: (msg) =>console.log(`[${new Date().toISOString()}] ${msg}`),
error: (msg) =>console.error(`[ERROR] ${msg}`)
};

const apiService = {
get: async (url) => { /* ... */ },
post: async (url, data) => { /* ... */ }
};

const AuthProvider = ({ logger = loggerService, api = apiService, children }) => {
const [user, setUser] = useState(null);

  useEffect(() => {
    logger.log('Auth provider mounted');
  }, [logger]);

return (
    <AuthContext.Provider value={{ user, setUser }}>
      <LoggerContext.Provider value={logger}>
        <ApiContext.Provider value={api}>
          {children}
        </ApiContext.Provider>
      </LoggerContext.Provider>
    </AuthContext.Provider>
  );
};

// 第三步：表单状态直接在组件中用 useState（或 Zustand）
const EditPostForm = () => {
const [content, setContent] = useState('');
const [title, setTitle] = useState('');
// ...
};

// ❌ 有问题的写法
const ThemeContext = createContext();

function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const [fontSize, setFontSize] = useState(14);

// 问题在这里：value 是个对象，每次都是新引用
const value = { theme, setTheme, fontSize, setFontSize };

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

// 即使 Button 只用了 theme，fontSize 改变也会导致 Button 重新渲染
function Button() {
const { theme } = useContext(ThemeContext); // 只用 theme
// 但因为 value 对象变了，这个组件也会重新渲染
return<button style={{background: theme === 'light' ? '#fff' : '#000'}}>Click</button>;
}

// ✅ 推荐的写法
const ThemeContext = createContext();
const FontSizeContext = createContext();

function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');

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

function FontSizeProvider({ children }) {
const [fontSize, setFontSize] = useState(14);

return (
    <FontSizeContext.Provider value={{ fontSize, setFontSize }}>
      {children}
    </FontSizeContext.Provider>
  );
}

// 现在 Button 只会在 theme 改变时重新渲染
function Button() {
const { theme } = useContext(ThemeContext);
return<button style={{background: theme === 'light' ? '#fff' : '#000'}}>Click</button>;
}