MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

useContext Hook在React中的应用

2023-11-177.2k 阅读

一、useContext Hook 基础概念

在 React 应用开发中，组件之间的数据传递是一个常见且重要的任务。通常情况下，我们通过 props 将数据从父组件传递到子组件。然而，当数据需要在多个嵌套层次较深的组件之间共享时，层层传递 props 会变得繁琐且难以维护，这就像在一座多层建筑中传递物品，每层都要有人接力传递，效率较低。

React 的 useContext Hook 就是为了解决这种问题而出现的。它提供了一种在组件树中共享数据的方式，使得数据可以直接在需要的组件中被访问，而无需通过中间组件层层传递 props。简单来说，useContext 就像是在多层建筑中安装了一部电梯，数据可以直接到达需要的楼层，而不用每层都中转。

useContext Hook 接收一个 context 对象（通过 React.createContext 创建）并返回该 context 的当前值。这个值会从组件树中距离最近的匹配的 <Provider> 中获取。

二、创建 Context

要使用 useContext，首先需要创建一个 context 对象。这可以通过 React.createContext 方法来实现。React.createContext 接受一个默认值作为参数，这个默认值会在组件树中没有找到匹配的 <Provider> 时使用。

以下是创建 context 的基本代码示例：

import React from 'react';

// 创建一个 Context
const MyContext = React.createContext('default value');

export default MyContext;

在上述代码中，我们使用 React.createContext 创建了一个名为 MyContext 的 context 对象，并为其设置了默认值 'default value'。这个默认值很重要，特别是在开发初期或者某些边缘情况下，当还没有合适的 <Provider> 为组件提供值时，组件可以使用这个默认值。

三、Provider 组件

创建好 context 之后，我们需要使用 Provider 组件来为组件树中的部分或全部组件提供数据。Provider 是 context 对象的一个属性，它接受一个 value 属性，这个 value 就是要共享的数据。任何在 Provider 组件树内的组件都可以读取这个数据。

以下是一个简单的使用 Provider 组件的示例：

import React from'react';
import MyContext from './MyContext';

const App = () => {
  const sharedData = 'Hello, Context!';
  return (
    <MyContext.Provider value={sharedData}>
      {/* 组件树中的其他组件可以访问 sharedData */}
    </MyContext.Provider>
  );
};

export default App;

在这个例子中，App 组件使用 MyContext.Provider 来提供 sharedData。所有在 <MyContext.Provider> 标签内的子组件都可以访问到 sharedData。这就像是在大楼的某一层设置了一个信息发布中心，这一层及以下楼层的人都可以获取到发布的信息。

四、使用 useContext Hook

一旦我们有了 context 和 Provider，就可以在需要的组件中使用 useContext Hook 来获取共享的数据。

以下是一个简单的组件使用 useContext 的示例：

import React, { useContext } from'react';
import MyContext from './MyContext';

const ChildComponent = () => {
  const contextValue = useContext(MyContext);
  return (
    <div>
      <p>The context value is: {contextValue}</p>
    </div>
  );
};

export default ChildComponent;

在 ChildComponent 中，我们使用 useContext(MyContext) 获取了 MyContext 的当前值，并将其显示在页面上。这里的 useContext 就像是在组件内部安装了一个接收器，专门接收来自 Provider 发布的信息。

五、复杂数据共享场景

  1. 对象和函数的共享 在实际应用中，共享的数据可能不仅仅是简单的字符串或数字，还可能是对象、函数等复杂类型。例如，我们可能有一个包含用户信息和操作函数的对象需要在多个组件间共享。

首先，创建 context 并在 Provider 中提供复杂数据：

import React from'react';

// 创建 Context
const UserContext = React.createContext();

const UserProvider = ({ children }) => {
  const user = {
    name: 'John Doe',
    age: 30,
    email: 'johndoe@example.com'
  };
  const updateUser = (newData) => {
    // 这里可以实现更新用户数据的逻辑
    console.log('Updating user with', newData);
  };
  const contextValue = { user, updateUser };
  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
};

export { UserContext, UserProvider };

然后，在子组件中使用 useContext 获取并使用这些数据：

import React, { useContext } from'react';
import { UserContext } from './UserContext';

const ProfileComponent = () => {
  const { user, updateUser } = useContext(UserContext);
  return (
    <div>
      <h2>{user.name}'s Profile</h2>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
      <button onClick={() => updateUser({ age: user.age + 1 })}>
        Increment Age
      </button>
    </div>
  );
};

export default ProfileComponent;

在这个例子中，ProfileComponent 通过 useContext 获取了 UserContext 中的用户对象和更新函数，并在界面上展示用户信息和提供更新操作。这就像在一个团队项目中，不同的小组都可以获取和操作共享的项目数据。

  1. 多层嵌套组件的数据共享 在大型应用中，组件可能会有很多层嵌套。使用 useContext 可以轻松实现数据在多层嵌套组件间的共享，而无需层层传递 props。

假设我们有如下组件结构：

// App.js
import React from'react';
import { UserProvider } from './UserContext';
import OuterComponent from './OuterComponent';

const App = () => {
  return (
    <UserProvider>
      <OuterComponent />
    </UserProvider>
  );
};

export default App;

// OuterComponent.js
import React from'react';
import MiddleComponent from './MiddleComponent';

const OuterComponent = () => {
  return (
    <div>
      <h2>Outer Component</h2>
      <MiddleComponent />
    </div>
  );
};

export default OuterComponent;

// MiddleComponent.js
import React from'react';
import InnerComponent from './InnerComponent';

const MiddleComponent = () => {
  return (
    <div>
      <h3>Middle Component</h3>
      <InnerComponent />
    </div>
  );
};

export default MiddleComponent;

// InnerComponent.js
import React, { useContext } from'react';
import { UserContext } from './UserContext';

const InnerComponent = () => {
  const { user } = useContext(UserContext);
  return (
    <div>
      <h4>Inner Component</h4>
      <p>User name from context: {user.name}</p>
    </div>
  );
};

export default InnerComponent;

在这个例子中，InnerComponent 可以直接通过 useContext 获取到 UserContext 中的用户数据，尽管它嵌套在多层组件之下，而不需要通过 OuterComponent 和 MiddleComponent 传递 props。这就像在一个大型组织中，底层员工可以直接获取到高层发布的重要信息，而不需要经过层层传达。

六、useContext 的性能考虑

  1. Context 变化与组件渲染 每当 Provider 的 value 属性发生变化时，使用 useContext 的组件都会重新渲染。这是因为 React 会将 value 的引用变化视为数据变化。例如，如果我们在 Provider 中这样提供数据：
const UserProvider = ({ children }) => {
  const user = {
    name: 'John Doe',
    age: 30,
    email: 'johndoe@example.com'
  };
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

每次 UserProvider 重新渲染（例如因为其父组件的状态变化导致 UserProvider 重新渲染），user 对象都会重新创建，其引用会发生变化，从而导致使用 UserContext 的组件重新渲染。这可能会带来不必要的性能开销，特别是在复杂应用中。

为了避免这种情况，可以使用 useMemo Hook 来稳定 value 的引用。例如：

import React, { useMemo } from'react';

const UserProvider = ({ children }) => {
  const user = useMemo(() => ({
    name: 'John Doe',
    age: 30,
    email: 'johndoe@example.com'
  }), []);
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

在这个例子中，useMemo 确保 user 对象只有在依赖数组（这里为空数组，表示只在组件挂载时创建一次）发生变化时才会重新创建，从而稳定了 value 的引用，减少了不必要的组件重新渲染。

  1. 性能优化与选择 尽管 useContext 提供了方便的数据共享方式，但在性能敏感的场景下，需要谨慎使用。例如，如果某个组件只依赖于局部状态，而不是共享的 context 数据，那么将其包裹在 Provider 组件树内可能会导致不必要的重新渲染。在这种情况下，可以考虑将该组件提取到 Provider 组件树之外，或者使用 React.memo 来优化组件渲染。

React.memo 是一个高阶组件，它可以对函数组件进行浅比较，如果 props 没有变化，则不会重新渲染组件。例如：

import React from'react';
import { UserContext } from './UserContext';

const MyComponent = React.memo((props) => {
  const { user } = useContext(UserContext);
  return (
    <div>
      <p>{props.text}</p>
      <p>User name from context: {user.name}</p>
    </div>
  );
});

export default MyComponent;

在这个例子中，MyComponent 使用了 React.memo，只有当 props.text 或者 UserContext 的 value 发生变化时，组件才会重新渲染，从而提高了性能。

七、useContext 与其他 Hook 的结合使用

  1. 与 useState 结合 在实际应用中，我们可能需要在使用 useContext 的同时，根据组件的局部状态来更新共享数据。例如，我们有一个购物车应用，购物车数据通过 context 共享，而每个商品组件可能有自己的选中状态（局部状态）。

首先，创建购物车 context 和 Provider：

import React from'react';

const CartContext = React.createContext();

const CartProvider = ({ children }) => {
  const [cart, setCart] = React.useState([]);
  const addToCart = (item) => {
    setCart([...cart, item]);
  };
  const contextValue = { cart, addToCart };
  return (
    <CartContext.Provider value={contextValue}>
      {children}
    </CartContext.Provider>
  );
};

export { CartContext, CartProvider };

然后，在商品组件中使用 useContext 和 useState：

import React, { useContext, useState } from'react';
import { CartContext } from './CartContext';

const Product = ({ product }) => {
  const [isSelected, setIsSelected] = useState(false);
  const { addToCart } = useContext(CartContext);
  const handleClick = () => {
    setIsSelected(!isSelected);
    if (!isSelected) {
      addToCart(product);
    }
  };
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
      <button onClick={handleClick}>
        {isSelected? 'Remove from cart' : 'Add to cart'}
      </button>
    </div>
  );
};

export default Product;

在这个例子中，Product 组件使用 useState 来管理自身的选中状态，同时使用 useContext 获取购物车的 addToCart 函数，根据选中状态更新购物车数据。这就像在一个电商平台中，每个商品可以根据用户的点击操作（局部状态变化）来更新共享的购物车数据。

  1. 与 useEffect 结合 useEffect Hook 可以用于在 context 值变化时执行副作用操作。例如，当用户登录状态（通过 context 共享）发生变化时，我们可能需要更新页面的标题或者发送一些分析数据。

首先，创建用户登录 context：

import React from'react';

const AuthContext = React.createContext();

const AuthProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  const login = () => {
    setIsLoggedIn(true);
  };
  const logout = () => {
    setIsLoggedIn(false);
  };
  const contextValue = { isLoggedIn, login, logout };
  return (
    <AuthContext.Provider value={contextValue}>
      {children}
    </AuthContext.Provider>
  );
};

export { AuthContext, AuthProvider };

然后，在页面组件中使用 useContext 和 useEffect：

import React, { useContext, useEffect } from'react';
import { AuthContext } from './AuthContext';

const Page = () => {
  const { isLoggedIn } = useContext(AuthContext);
  useEffect(() => {
    document.title = isLoggedIn? 'Welcome, User!' : 'Please Login';
  }, [isLoggedIn]);
  return (
    <div>
      <h1>{isLoggedIn? 'Welcome' : 'Login'}</h1>
    </div>
  );
};

export default Page;

在这个例子中，Page 组件使用 useContext 获取用户登录状态，并通过 useEffect 在登录状态变化时更新页面标题。这就像在一个网站中，根据用户的登录状态实时更新页面的显示信息。

八、useContext 的错误处理

  1. 未找到 Provider 的情况 如果在使用 useContext 的组件树中没有找到匹配的 Provider，组件会使用创建 context 时设置的默认值。然而，在某些情况下，这可能不是预期的行为，特别是当我们依赖的共享数据必须存在时。

例如，我们有一个需要用户认证信息的组件，但没有提供认证 context 的 Provider：

import React, { useContext } from'react';
import AuthContext from './AuthContext';

const ProtectedComponent = () => {
  const { user } = useContext(AuthContext);
  if (!user) {
    throw new Error('User not authenticated');
  }
  return (
    <div>
      <p>Welcome, {user.name}</p>
    </div>
  );
};

export default ProtectedComponent;

在这个例子中，ProtectedComponent 需要通过 AuthContext 获取用户信息。如果没有找到 Provider，user 会是 undefined，此时组件抛出一个错误，提示用户未认证。这种方式可以确保在需要特定共享数据的组件中，数据的正确性和完整性。

  1. Provider 值变化引起的错误 当 Provider 的 value 发生变化时，可能会导致使用 useContext 的组件出现错误，特别是当 value 的结构发生改变时。例如，我们最初在 Provider 中提供的 value 是一个对象，包含 name 和 age 字段：
const UserProvider = ({ children }) => {
  const user = {
    name: 'John Doe',
    age: 30
  };
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

然后在子组件中使用：

const UserComponent = () => {
  const { name, age } = useContext(UserContext);
  return (
    <div>
      <p>{name} is {age} years old</p>
    </div>
  );
};

如果后续我们修改 Provider 的 value 结构，例如移除 age 字段：

const UserProvider = ({ children }) => {
  const user = {
    name: 'John Doe'
  };
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

此时 UserComponent 会因为解构 age 字段而导致错误（age 为 undefined）。为了避免这种情况，可以在解构时提供默认值：

const UserComponent = () => {
  const { name, age = 0 } = useContext(UserContext);
  return (
    <div>
      <p>{name} is {age} years old</p>
    </div>
  );
};

这样即使 age 字段在 value 中不存在，也不会导致错误，而是使用默认值 0。这就像在编程中，我们提前考虑到可能出现的变化，做好相应的应对措施，确保程序的稳定性。

九、在不同框架中的应用

  1. Next.js 中的 useContext Next.js 是一个基于 React 的流行框架，它对 useContext 的使用与原生 React 基本相同。例如，在 Next.js 应用中，我们可以创建一个全局的 context 来管理用户认证状态。

首先，在 lib 目录下创建 authContext.js：

import React from'react';

const AuthContext = React.createContext();

export default AuthContext;

然后，在 pages/_app.js 中提供 context：

import React from'react';
import AuthContext from '../lib/authContext';

function MyApp({ Component, pageProps }) {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  const login = () => {
    setIsLoggedIn(true);
  };
  const logout = () => {
    setIsLoggedIn(false);
  };
  const contextValue = { isLoggedIn, login, logout };
  return (
    <AuthContext.Provider value={contextValue}>
      <Component {...pageProps} />
    </AuthContext.Provider>
  );
}

export default MyApp;

在具体的页面组件（如 pages/dashboard.js）中使用 useContext：

import React, { useContext } from'react';
import AuthContext from '../lib/authContext';

const Dashboard = () => {
  const { isLoggedIn } = useContext(AuthContext);
  return (
    <div>
      <h1>{isLoggedIn? 'Dashboard' : 'Please Login'}</h1>
    </div>
  );
};

export default Dashboard;

在 Next.js 中，通过这种方式可以轻松实现全局状态管理，并且与 Next.js 的路由、数据获取等功能很好地集成。这就像在一个大型建筑项目中，使用 Next.js 框架搭建好整体架构后，useContext 可以作为内部的信息传递系统，确保各个房间（组件）都能获取到必要的信息。

  1. Gatsby 中的 useContext Gatsby 也是一个基于 React 的静态网站生成框架，同样支持 useContext 的使用。例如，我们可以创建一个 context 来管理网站的主题（如亮色主题或暗色主题）。

首先，创建 themeContext.js：

import React from'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

然后，在 layout.js 中提供 context：

import React from'react';
import ThemeContext from './themeContext';

const Layout = ({ children }) => {
  const [theme, setTheme] = React.useState('light');
  const toggleTheme = () => {
    setTheme(theme === 'light'? 'dark' : 'light');
  };
  const contextValue = { theme, toggleTheme };
  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
};

export default Layout;

在页面组件中使用 useContext：

import React, { useContext } from'react';
import ThemeContext from './themeContext';

const Page = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <div>
      <h1>Theme: {theme}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default Page;

在 Gatsby 中，useContext 可以方便地在不同页面和组件间共享主题相关的状态和操作，为用户提供一致的视觉体验。这就像在设计一个多页面的宣传册时，通过 useContext 确保所有页面的主题风格保持一致，并且可以根据用户操作进行切换。

十、实际项目中的案例分析

  1. 社交应用中的用户信息共享 在一个社交应用中，用户的个人资料信息（如用户名、头像、简介等）需要在多个组件中共享，例如导航栏、个人资料页面、动态发布组件等。使用 useContext 可以轻松实现这一需求。

首先，创建 UserProfileContext.js：

import React from'react';

const UserProfileContext = React.createContext();

export default UserProfileContext;

然后，在 App.js 中提供用户资料信息：

import React from'react';
import UserProfileContext from './UserProfileContext';

const App = () => {
  const userProfile = {
    name: 'Alice',
    avatar: 'https://example.com/avatar.jpg',
    bio: 'A passionate developer'
  };
  return (
    <UserProfileContext.Provider value={userProfile}>
      {/* 应用的其他组件 */}
    </UserProfileContext.Provider>
  );
};

export default App;

在导航栏组件 NavBar.js 中使用 useContext：

import React, { useContext } from'react';
import UserProfileContext from './UserProfileContext';

const NavBar = () => {
  const { name, avatar } = useContext(UserProfileContext);
  return (
    <nav>
      <img src={avatar} alt={name} />
      <span>{name}</span>
    </nav>
  );
};

export default NavBar;

在个人资料页面组件 ProfilePage.js 中使用 useContext：

import React, { useContext } from'react';
import UserProfileContext from './UserProfileContext';

const ProfilePage = () => {
  const { name, bio } = useContext(UserProfileContext);
  return (
    <div>
      <h1>{name}</h1>
      <p>{bio}</p>
    </div>
  );
};

export default ProfilePage;

通过 useContext，社交应用中的不同组件可以方便地获取用户资料信息，而无需繁琐的 props 传递，提高了代码的可维护性和组件的复用性。这就像在一个社交圈子中，大家都可以方便地获取到某个用户的基本信息，而不需要每个人都去单独询问。

  1. 电商应用中的购物车管理 在电商应用中，购物车数据的管理和共享是一个核心功能。我们可以使用 useContext 来实现购物车数据在不同页面和组件间的共享。

创建 CartContext.js：

import React from'react';

const CartContext = React.createContext();

export default CartContext;

在 App.js 中提供购物车相关的状态和操作：

import React from'react';
import CartContext from './CartContext';

const App = () => {
  const [cart, setCart] = React.useState([]);
  const addToCart = (product) => {
    setCart([...cart, product]);
  };
  const removeFromCart = (productId) => {
    setCart(cart.filter((product) => product.id!== productId));
  };
  const contextValue = { cart, addToCart, removeFromCart };
  return (
    <CartContext.Provider value={contextValue}>
      {/* 电商应用的其他组件 */}
    </CartContext.Provider>
  );
};

export default App;

在商品列表组件 ProductList.js 中使用 useContext 来添加商品到购物车：

import React, { useContext } from'react';
import CartContext from './CartContext';

const ProductList = ({ products }) => {
  const { addToCart } = useContext(CartContext);
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>{product.price}</p>
          <button onClick={() => addToCart(product)}>Add to Cart</button>
        </div>
      ))}
    </div>
  );
};

export default ProductList;

在购物车页面组件 CartPage.js 中使用 useContext 来显示购物车数据和提供移除商品操作：

import React, { useContext } from'react';
import CartContext from './CartContext';

const CartPage = () => {
  const { cart, removeFromCart } = useContext(CartContext);
  return (
    <div>
      <h1>Shopping Cart</h1>
      {cart.map((product) => (
        <div key={product.id}>
          <p>{product.name}</p>
          <p>{product.price}</p>
          <button onClick={() => removeFromCart(product.id)}>Remove</button>
        </div>
      ))}
    </div>
  );
};

export default CartPage;

通过 useContext，电商应用中的购物车功能可以在不同组件间流畅地协同工作，提升了用户体验。这就像在一个实体商店中，顾客在不同区域挑选商品，而购物车可以随时更新并在结算区域展示商品信息。

通过以上各个方面的介绍，我们全面深入地了解了 useContext Hook 在 React 中的应用，包括其基础概念、创建和使用方法、性能考虑、与其他 Hook 的结合、错误处理以及在不同框架和实际项目中的应用。在实际开发中，合理运用 useContext 可以有效地提高代码的可维护性和组件间的数据共享效率，是前端开发工程师不可或缺的重要工具。