reactHooks之useContext

1、作用：用于在函数组件中获取和使用上下文（Context）。

2、说明：

上下文是 React 中用于在组件树中共享数据的一种机制。通过创建上下文对象，你可以将数据传递给整个组件树中的多个组件，而不需要一级一级地手动传递。

要使用 useContext，首先你需要创建一个上下文对象。可以使用 React.createContext 方法来创建一个上下文对象，并指定默认值。

3、示例：

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

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

// 上下文提供者组件
function MyContextProvider({ children }) {
  // 定义共享的数据
  const sharedData = 'Hello from Context';

  return (
    
      {children}
    
  );
}

// 使用上下文的子组件
function ChildComponent() {
  // 使用 useContext 获取上下文中的数据
  const data = useContext(MyContext);

  return 
{data}
;
}

// 在应用的根组件中使用上下文提供者
function App() {
  return (
    
      
    
  );
}

在这个示例中，我们首先使用 createContext 方法创建了一个名为 MyContext 的上下文对象。然后，我们定义了一个上下文提供者组件 MyContextProvider，它使用 MyContext.Provider 来包裹子组件，并通过 value 属性传递共享的数据。

在需要使用上下文数据的子组件中，我们使用 useContext Hook 来获取上下文中的数据。在 ChildComponent 中，我们调用 useContext(MyContext) 来获取 MyContext 上下文中的数据，并将其渲染到组件中。

最后，在根组件 App 中，我们将 MyContextProvider 包裹在应用的顶层，以便在整个组件树中共享上下文数据。

这是 useContext 的基本用法。通过使用上下文和 useContext，你可以在函数组件中更方便地共享和使用数据。