第二章：React Hooks

useContext

什么是 useContext？

useContext 是 React 提供的一个 Hook，用于在函数组件中访问 React 的 Context。Context 提供了一种在组件树中共享数据的方式，避免了通过 props 层层传递数据的繁琐。

基本用法

  1. 创建 Context
    使用 React.createContext 创建一个 Context 对象：

    const MyContext = React.createContext(defaultValue);

  2. 提供 Context
    使用 Context.Provider 包裹组件树，并通过 value 属性传递数据：

    <MyContext.Provider value={someValue}>
  <ChildComponent />
</MyContext.Provider>

  3. 消费 Context
    在子组件中使用 useContext 获取 Context 的值：

    const value = useContext(MyContext);

示例代码

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

// 1. 创建 Context
const ThemeContext = createContext('light');

function App() {
  return (
    // 2. 提供 Context
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

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

function ThemedButton() {
  // 3. 消费 Context
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'dark' ? '#333' : '#eee' }}>Themed Button</button>;
}

适用场景

  1. 全局状态管理
    比如主题、用户登录状态、语言偏好等需要在多个组件中共享的数据。
  2. 避免 Prop Drilling
    当需要跨多层组件传递数据时，Context 可以替代手动传递 props。

注意事项

  1. 性能优化
    Context 的值变化时，所有消费该 Context 的组件都会重新渲染。可以通过拆分 Context 或结合 useMemo 优化性能。
  2. 默认值
    如果组件没有匹配到 Provider，useContext 会返回创建 Context 时传入的默认值。

与其他 Hook 结合

useContext 常与其他 Hook 配合使用，比如：

  • 结合 useReducer 实现轻量级状态管理。
  • 结合自定义 Hook 封装复杂的 Context 逻辑。

总结

useContext 是 React 中简化跨组件数据共享的重要工具，合理使用可以大幅提升代码的可维护性。但需注意避免滥用，以免导致组件过度耦合。

Last Updated::