React Hooks 中的 useContext函数

useContext是React Hooks中用于在函数组件中消费上下文（Context）的值的钩子函数。

上下文（Context）是一种在组件树中共享数据的机制，它可以避免通过逐层传递 props 的方式来传递数据。通过useContext，我们可以在函数组件中直接访问上下文提供的值，而不需要通过 prop 层层传递。

使用useContext需要两个步骤：

在创建上下文时，使用 React.createContext() 创建一个上下文对象，并通过 Provider 组件提供值。
在需要使用上下文值的组件中，使用 useContext 函数来访问上下文的值。
下面是一个例子:

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

// 创建上下文对象
const MyContext = createContext();

// 在父组件中提供上下文值
function ParentComponent() {
  return (
    <MyContext.Provider value="Hello, World!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 在子组件中使用上下文值
function ChildComponent() {
  const contextValue = useContext(MyContext);

  return <div>{contextValue}</div>;
}

function App() {
  return (
    <ParentComponent />
  );
}

在这个例子中，通过 createContext 创建了一个上下文对象 MyContext，然后在 ParentComponent 中使用 MyContext.Provider 提供上下文的值。在 ChildComponent 中使用 useContext 函数来访问上下文的值。

通过useContext，我们可以方便地在函数组件中消费上下文的值，并且在上下文值发生变化时也能够及时更新组件。