React Tutorial: Context API

Context API 是 React 中用于组件间通信的一种方式，它可以让你在不使用 props 传递的情况下，在组件树中共享一些值。

优点

  • 无需逐层传递 props：在大型应用中，你可能会遇到需要将 props 逐层传递给子组件的情况，这会导致组件结构变得复杂。使用 Context API，你可以直接在组件树中共享数据。

  • 更好的组件解耦：使用 Context API，组件可以更专注于自己的功能，而不必关心数据来源。

基本用法

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

// 创建 Context 对象
const MyContext = createContext();

// 创建一个使用 Context 的组件
function MyComponent() {
  const value = useContext(MyContext);
  // 使用 value
}

// 创建一个 Provider 组件，用于提供 Context 值
function MyProvider({ children }) {
  const value = 'Hello, World!';
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

示例

假设你有一个应用，需要共享一个用户状态，你可以使用 Context API 来实现。

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

// 创建 Context 对象
const UserContext = createContext();

// 创建一个使用 Context 的组件
function UserProfile() {
  const user = useContext(UserContext);
  return <div>{user.name}</div>;
}

// 创建一个 Provider 组件，用于提供用户状态
function App() {
  const user = { name: '张三' };
  return (
    <UserContext.Provider value={user}>
      <UserProfile />
    </UserContext.Provider>
  );
}

了解更多关于 React Context API 的信息

图片

React Context API