如何使用useContext

React的 useContext hook允许我们在React组件之间共享数据，而不必通过props层层传递。使用 useContext可以更方便地管理组件之间的状态和数据。

介绍

useContext需要接收一个context对象作为参数，并返回一个包含当前context值的对象。context对象可以通过React.createContext()方法创建，例如：

import React from 'react';

const MyContext = React.createContext(defaultValue);

其中defaultValue是可选的默认值，如果在组件树中没有匹配到Provider，则会使用该默认值。

使用方法

1. 创建Context

首先，我们需要通过React.createContext()方法创建一个Context对象：

const MyContext = React.createContext(defaultValue);

1. 提供Context的值

在组件树中提供Context的值，通过<MyContext.Provider>组件来提供，例如：

<MyContext.Provider value={contextValue}>
  <ChildComponent />
</MyContext.Provider>

其中contextValue为提供的Context的值，<ChildComponent>是需要访问该Context的组件。

1. 访问Context的值

在需要访问Context的组件中，使用useContext hook来获取Context的值，例如：

import React, { useContext } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const contextValue = useContext(MyContext);
  // ...
}

1. 完整示例

import React, { useContext } from 'react';

const MyContext = React.createContext(defaultValue);

function ParentComponent() {
  const contextValue = { /* ... */ };

  return (
    <MyContext.Provider value={contextValue}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const contextValue = useContext(MyContext);
  // ...

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

以上就是使用useContext的基本方法，可以更方便地管理组件之间的状态和数据。