react useContext 的使用方法

useContext 是 React 中一个非常实用的 Hook，它让你能够轻松地在组件树中传递数据，无需手动层层传递 props。下面是一个清晰的使用指南。

💁 基本使用步骤

使用 useContext 主要分为三个步骤：创建 Context、提供 Context 值、在组件中订阅 Context。

步骤	操作	代码示例
1. 创建 Context	使用 React.createContext 创建一个 Context 对象。你可以为其提供一个默认值，当组件不在 Provider 包裹下时会使用该默认值。	const MyContext = React.createContext(defaultValue);
2. 提供 Context 值	在组件树上层使用 <MyContext.Provider> 组件包裹需要接收数据的子组件，并通过 value 属性传递数据。	<MyContext.Provider value={someValue}> <ChildComponent /> </MyContext.Provider>
3. 订阅 Context 值	在子组件（任何层级）中，使用 useContext Hook 来获取 Context 的当前值。	const value = useContext(MyContext);

🔢 修改 Context 的值

让 Context 数据变得可修改，通常是通过在 value 中传递一个状态和更新该状态的函数来实现的。

// 在提供 Context 的父组件中（如 App.js）
import React, { useState } from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  // 将状态和更新函数一起传递
  const contextValue = {
    user,
    updateUser: setUser
  };

  return (
    <MyContext.Provider value={contextValue}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

在子组件中，你就可以获取并调用这个函数来更新状态：

// 在子组件中
import React, { useContext } from 'react';
import MyContext from './MyContext';

function ChildComponent() {
  const { user, updateUser } = useContext(MyContext);

  const handleClick = () => {
    updateUser({ ...user, name: 'Jane' });
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <button onClick={handleClick}>Change Name</button>
    </div>
  );
}

这种方式使得深层子组件可以直接更新全局状态。

🎯 适用场景与最佳实践

• 典型应用场景：useContext 非常适合于那些需要被许多不同层级的组件访问的"全局"数据，例如：

  • 用户认证信息（如用户登录状态、个人资料）。
  • 界面主题（如浅色/深色模式）。
  • 多语言国际化（i18n）信息。

• 性能优化提醒：需要特别注意，每当 Provider 的 value 属性发生变化时，所有订阅了该 Context 的子组件都会重新渲染，即使它们只使用了 value 中未变化的部分。为了优化性能，你可以考虑：

  • 拆分 Context：将不常变化的数据和频繁变化的数据放到不同的 Context 中。
  • 使用 React.memo：结合 React.memo 来防止不必要的子组件重渲染。
  • 使用 useMemo：对 value 进行记忆化处理。

• 创建自定义 Hook：这是一个推荐的最佳实践。你可以创建一个自定义 Hook 来使用 useContext，这有助于提高代码的复用性，并且在多个组件使用相同 Context 时非常方便。

  // 创建自定义 Hook
  import { useContext } from 'react';
  import { MyContext } from './MyContext';
  
  export function useMyContext() {
    const context = useContext(MyContext);
    if (context === undefined) {
      // 可选：检查 Context 是否在 Provider 内
      throw new Error('useMyContext must be used within a MyContext.Provider');
    }
    return context;
  }
  
  // 在组件中使用自定义 Hook
  function MyComponent() {
    const { user } = useMyContext(); // 使用更简洁
    // ...
  }

⚠️ 注意事项

• 默认值：只有在组件所处的组件树中没有匹配到 Provider 时，useContext 才会返回创建 Context 时传入的默认值（defaultValue）。
• 寻找 Provider：useContext 会寻找组件树中离它最近的同一个 Context 的 Provider。
• 类组件中的使用：在类组件中，你不能使用 useContext Hook。替代方法是使用 <MyContext.Consumer> 渲染函数，或者通过静态属性 static contextType = MyContext 来连接，然后通过 this.context 来访问。

💎 核心价值

简单来说，useContext 的核心价值在于解决了组件树中"深层级"组件之间的数据传递难题。它让你无需再通过中间组件一层层地传递 props（即"prop drilling"），使得状态共享更加清晰和高效。

希望这份指南能帮助你更好地理解和使用 useContext！如果你对特定场景下的应用还有疑问，欢迎继续提出。

微信公众号