React-Hooks----useContext()

前言

useContext() 是 React Hooks 中的一个用于访问 React 上下文（Context）的 Hook。它接收一个 React 上下文对象（通常使用 React.createContext 创建），并返回该上下文的当前值。

用法

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

// 创建Context容器对象：
const MyContext = createContext();

// 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
function MyProvider(props) {
    
    
  return <MyContext.Provider value={
    
    /*上下文的值*/}>{
    
    props.children}</MyContext.Provider>;
}

// 创建一个组件，从上下文中读取值
function MyComponent() {
    
    
  const myValue = useContext(MyContext);
  // ...
}

在上面的例子中，MyProvider 组件作为上下文的提供者，通过value属性向下传递上下文的值。在 MyComponent 中，我们使用 useContext(MyContext) 来访问该上下文的当前值。这样，即使 MyComponent 不在 MyProvider 的子组件树中，也可以轻松地访问该上下文的值。