React 中 Context 的应用场景有哪些？

推荐答案

在 React 中，Context 的主要应用场景包括：

1. 主题切换：通过 Context 可以轻松实现应用的主题切换功能，比如在深色模式和浅色模式之间切换。
2. 用户认证：Context 可以用来传递用户认证信息（如用户登录状态、权限等），避免通过 props 层层传递。
3. 多语言支持：通过 Context 可以管理应用的语言设置，方便实现国际化。
4. 全局状态管理：对于一些小型的应用，Context 可以用来替代 Redux 或 MobX 等状态管理工具，管理全局状态。
5. 共享复杂逻辑：当多个组件需要共享某些复杂逻辑或数据时，Context 可以避免重复代码。

本题详细解读

1. 主题切换

Context 可以用来管理应用的主题。通过创建一个 ThemeContext，可以在整个应用中共享当前的主题设置，并在需要时动态切换主题。

// www.javascriptcn.com code example
const ThemeContext = React.createContext('light');

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>Themed Button</button>;
}

2. 用户认证

Context 可以用来传递用户认证信息，避免通过 props 层层传递。例如，可以在应用的最顶层提供一个 AuthContext，然后在需要的地方使用这些信息。

// www.javascriptcn.com code example
const AuthContext = React.createContext();

function App() {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      <Navbar />
      <Content />
    </AuthContext.Provider>
  );
}

function Navbar() {
  const { user } = useContext(AuthContext);
  return <div>{user ? `Welcome, ${user.name}` : 'Please log in'}</div>;
}

function Content() {
  const { user, setUser } = useContext(AuthContext);
  return (
    <div>
      {user ? <button onClick={() => setUser(null)}>Logout</button> : <button onClick={() => setUser({ name: 'John' })}>Login</button>}
    </div>
  );
}

3. 多语言支持

Context 可以用来管理应用的语言设置，方便实现国际化。通过创建一个 LanguageContext，可以在整个应用中共享当前的语言设置。

// www.javascriptcn.com code example
const LanguageContext = React.createContext('en');

function App() {
  const [language, setLanguage] = useState('en');

  return (
    <LanguageContext.Provider value={language}>
      <Toolbar />
      <button onClick={() => setLanguage(language === 'en' ? 'zh' : 'en')}>
        Toggle Language
      </button>
    </LanguageContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

function Greeting() {
  const language = useContext(LanguageContext);
  return <div>{language === 'en' ? 'Hello' : '你好'}</div>;
}

4. 全局状态管理

对于一些小型的应用，Context 可以用来替代 Redux 或 MobX 等状态管理工具，管理全局状态。通过创建一个 GlobalStateContext，可以在整个应用中共享全局状态。

// www.javascriptcn.com code example
const GlobalStateContext = React.createContext();

function App() {
  const [state, setState] = useState({ count: 0 });

  return (
    <GlobalStateContext.Provider value={{ state, setState }}>
      <Counter />
    </GlobalStateContext.Provider>
  );
}

function Counter() {
  const { state, setState } = useContext(GlobalStateContext);
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => setState({ count: state.count + 1 })}>Increment</button>
    </div>
  );
}

5. 共享复杂逻辑

当多个组件需要共享某些复杂逻辑或数据时，Context 可以避免重复代码。例如，可以通过 Context 共享一个复杂的计算逻辑。

// www.javascriptcn.com code example
const ComplexLogicContext = React.createContext();

function App() {
  const complexLogic = () => {
    // 复杂的计算逻辑
    return Math.random();
  };

  return (
    <ComplexLogicContext.Provider value={complexLogic}>
      <ComponentA />
      <ComponentB />
    </ComplexLogicContext.Provider>
  );
}

function ComponentA() {
  const complexLogic = useContext(ComplexLogicContext);
  return <div>{complexLogic()}</div>;
}

function ComponentB() {
  const complexLogic = useContext(ComplexLogicContext);
  return <div>{complexLogic()}</div>;
}