React 学习笔记之 context API 详解

2023-12-30 15:17:29

在 React 生态圈中，我们通常会通过层层传递 props 来实现组件之间的通信，这在组件嵌套层次不深时还好，但当我们的组件树变得复杂起来时，逐层传递 props 的方式将会变得繁琐且难以维护。

为了解决这个问题，React 提供了 context API。Context API 是一种在组件树中共享状态或数据的机制，它允许你直接访问和更新父组件的状态，而无需层层传递 props。

Context API 的基本用法

Context API 提供了两个组件，分别是 Provider 和 Consumer。Provider 组件用于提供共享数据或状态，而 Consumer 组件用于消费共享数据或状态。

1. 使用 Provider 共享数据

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

// 创建一个 context 对象
const MyContext = createContext();

// 在某个组件中使用 MyContext
const MyComponent = () => {
  // 从 context 对象中获取共享数据
  const value = React.useContext(MyContext);

  // 使用共享数据
  return <div>{value}</div>;
};

// 使用 Provider 组件来提供共享数据
const App = () => {
  // 创建共享数据的初始值
  const [value, setValue] = useState('Hello World!');

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

export default App;

在上面的示例中，我们创建了一个名为 MyContext 的 context 对象，并在 App 组件中使用 Provider 组件来提供共享数据。在 MyComponent 组件中，我们使用 useContext 钩子来获取共享数据。

2. 使用 Consumer 消费数据

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

// 创建一个 context 对象
const MyContext = createContext();

// 在某个组件中使用 MyContext
const MyComponent = () => {
  // 从 context 对象中获取共享数据
  const value = React.useContext(MyContext);

  // 使用共享数据
  return <div>{value}</div>;
};

// 使用 Provider 组件来提供共享数据
const App = () => {
  // 创建共享数据的初始值
  const [value, setValue] = useState('Hello World!');

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

export default App;