react状态管理Context详解

---

前言

在 React 应用中，有时我们需要在组件树的不同层次之间共享状态或配置。传统的做法是通过 props 一层层地传递下去，但这会导致组件变得臃肿并且难以维护。为了解决这个问题，React 提供了 Context API，它允许我们在组件树中无痛地传递数据。

---

一、Context API 的基本概念

Context 对象

React.createContext() 方法用于创建一个 Context 对象，该对象是 React 提供的一个全局容器，用于保存需要传递的数据。

Provider 组件

Context.Provider 是一个 React 组件，它接受一个 value 属性，该属性会被传递给子组件中的 Consumer 或 useContext。

Consumer 组件

Context.Consumer 是一个 React 组件，它接受一个函数作为子组件，并将 Context 的当前值作为参数传递给该函数。

useContext Hook

useContext 是一个 Hook，它允许函数组件订阅 Context 的变化。。

二、创建 Context

要使用 Context API，首先需要创建一个 Context 对象。我下面是写一个音频播放器按钮的例子,使用函数组件、ts

'use client';
import React, {
   
  useState,
  useEffect,
  useRef,
  createContext,
  useCallback,
  FC,
} from 'react';
import {
    AudioContextValue } from '../type';

// 提供一个空函数作为默认值，实际使用中会被替换
const defaultValue: AudioContextValue = {
   
  isPlaying: false,
  play: () => {
   },
  pause: () => {
   },
};

// 创建 AudioContext，并传入默认值
export const AudioContext = createContext<AudioContextValue>(defaultValue);

三、使用 Provider 分发值

Context 对象和Provider可以分开写，我现在是写在一个文件了，引用都在上面。
最主要的内容在return这里

• 使用 <AudioContext.Provider> 组件将 isPlaying、play 和 pause 作为值传递给子组件。
• {children} 表示 Provider 组件的子元素，这些子元素将能够访问传递的值。

const Provider: FC<AudioContextProviderProps> = ({
     children }) => {
   
  const [isPlaying, setIsPlaying] = useState(false); // 播放状态
  const audioRef = useRef<HTMLAudioElement |