useContext 如何使用

`useContext`是React Hooks库中的一个hook，它用于在函数组件或者自定义Hook内部访问由其祖先组件通过`Provider`提供的值。这个值通常是一个上下文(context)。

使用`useContext`的基本步骤如下：

1. 首先，在应用程序的顶层创建一个context实例，比如`MyContext`，并提供一些值作为初始状态，通常是一个对象或枚举类型：

import { createContext, Provider } from 'react';

const MyContext = createContext();

2. 然后，如果需要在某个组件上设置数据，将数据放在`Provider`中，并传入当前组件：

<MyContext.Provider value={{ myData: 'from parent' }}>
  <ChildComponent />
</MyContext.Provider>

3. 在需要使用的组件中，使用`useContext` hook获取数据：

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

function ChildComponent() {
  const { myData } = useContext(MyContext);
  
  // 使用myData
  return <div>Received data: {myData}</div>;
}

注意，`useContext`只会返回一层的context，如果你需要访问更深层的context，可以考虑使用`useReducer`、`useState`或者其他方式传递数据。