React-Hooks-useContext

前言

useContext 是 React 中的一个 Hooks，它用于访问 React 上下文（Context），并允许您在函数组件中共享全局数据，避免了逐层传递 props 的麻烦。以下是关于 useContext 的简介：

React Context 是一种全局状态管理的解决方案，通常用于跨组件层次传递数据，而不需要手动通过 props 将数据传递给每个中间组件。useContext 让您更轻松地使用这种全局数据。

使用 useContext 需要两个步骤：

创建上下文：首先，您需要使用 React.createContext 创建一个上下文对象。这个上下文对象充当数据的容器，然后可以通过提供者（Provider）来共享数据。

提供者和消费者：在某个父组件中，使用 Provider 来提供上下文的值。然后，在任何需要访问上下文数据的后代组件中，使用 useContext 钩子来获取这些数据。

useContext 接受上下文对象作为参数，并返回当前上下文的值。这使得在函数组件中非常容易访问全局数据，而无需传递 props。

举例来说，假设您有一个主题上下文，用于存储应用程序的主题信息，您可以使用 useContext 在任何组件中访问主题数据，而不必在每个组件中手动传递主题作为 props。

useContext 是 React 中的一个重要 Hooks，它使全局数据共享变得更加简单和高效，特别适用于状态管理和主题切换等应用场景。

useContext Hook 概述

• useContext 相当于类组件中的 static contextType = Context

博主这里直接就是以两种不同的方式消费的代码贴在下方自己体会下就知道为啥要介绍 useContext Hook 了示例一：

代码语言：javascript复制

import React, {createContext} from 'react';

const UserContext = createContext({});
const ColorContext = createContext({});

function Home() {
    return (
        <UserContext.Consumer>
            {
                value1 => {
                    return (
                        <ColorContext.Consumer>
                            {
                                value2 => {
                                    return (
                                        <div>
                                            <p>{value1.name}</p>
                                            <p>{value1.age}</p>
                                            <p>{value2.color}</p>
                                        </div>
                                    )
                                }
                            }
                        </ColorContext.Consumer>
                    )
                }
            }
        </UserContext.Consumer>
    )
}

export default function App() {
    return (
        <UserContext.Provider value={{name: 'yangbuyiya', age: 18}}>
            <ColorContext.Provider value={{color: 'red'}}>
                <Home/>
            </ColorContext.Provider>
        </UserContext.Provider>
    )
}

使用 useContext Hook：

代码语言：javascript复制

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

const UserContext = createContext({});
const ColorContext = createContext({});

function Home() {
    const user = useContext(UserContext);
    const color = useContext(ColorContext);
    return (
        <div>
            <p>{user.name}</p>
            <p>{user.age}</p>
            <p>{color.color}</p>
        </div>
    )
}

export default function App() {
    return (
        <UserContext.Provider value={{name: 'yangbuyiya', age: 18}}>
            <ColorContext.Provider value={{color: 'red'}}>
                <Home/>
            </ColorContext.Provider>
        </UserContext.Provider>
    )
}

使用了之后直接通过 useContext 就可以直接将生产者的数据进行绑定然后获取到，使用起来非常方便。

最后

本期结束咱们下次再见