React Context API 用于在组件树中共享全局状态

1. 创建 Context：

const initialValue = {
   
   
  age: 0,
  addAge: () => {
   
   },
};
export const InfoContext = createContext(initialValue);
createContext(initialValue)：

创建一个新的 Context，用来在组件树中提供和消费共享的数据。
这里的 initialValue 定义了 Context 的默认值。initialValue 中有两个属性：

age: 0：代表年龄，初始值为 0。

addAge: () => {}：一个空的函数，目的是定义如何增加年龄。

当没有明确的 Provider 时，使用的就是这个默认的 initialValue。

2. 使用 Context：

export const useInfoContext = () => {
   
   
  return useContext(InfoContext);
};

useInfoContext：
这是一个自定义的 Hook，内部调用了 React 提供的 useContext Hook。

useContext(InfoContext)：该函数返回当前 Context 的值（在 Provider 中设置的值），所以你可以在任何组件中使用 useInfoContext 来访问 age 和 addAge。

它的作用是：让组件能方便地获取到 InfoContext 中的值，并且使得这个值在组件树中任何地方都能共享和消费。

3. 定义 Context Provider：

type MyContextProviderProps