useContext 简介

useContext 是 React 中的一个 Hook，它可以定义全局状态，允许从组件中读取和订阅上下文信息。 useContext 能够让所有在某个组件开始的组件树上创建一个 Context。这样这个组件树上的所有组件，就都能访问和修改这个 Context 了。

React.createContext() 简介

React.createContext() 是 React 提供的一个用于创建上下文对象的方法。它可以被用来在 React 应用程序中实现全局状态管理和跨组件通信。

React.createContext() 方法返回的对象包含两个组件：Provider 和 Consumer。

• Provider 组件用于提供一个新的上下文值，并将其传递给下面的组件树中的所有 Consumer 组件。Provider 组件需要一个 value 属性，它是要传递的上下文值。
• Consumer 组件用于在组件树中消费上下文值。Consumer 组件是一个函数组件，它接收一个函数作为其子元素，并将当前上下文值作为该函数的参数。

如何应用

了解完useContext和createContext的基本知识，那么接下来我们使用useContext+React.createContext()实现简单的多语言切换。

最终实现的效果如下：

1.首先，创建一个上下文对象：

// LangContext.js
import React from "react";

//创建了一个上下文对象
const MyContext = React.createContext("en");
export default MyContext;

2.在父组件中，将需要共享的数据和方法放在上下文对象中，并将上下文对象作为一个 prop 传递给子组件：

// App.js
import React, { useState } from "react";
import LangContext from "./LangContext";
import languages from "./languageConfig";
import ChildComponent from "./childComponent";

// 创建一个多语言上下文对象
const LanguageContext = LangContext;
// 默认语言为英文
const defaultLanguage = "en";

function App() {
    const [language, setLanguage] = useState(defaultLanguage);

    // 切换语言
    const handleLanguageChange = () => {
        setLanguage(language === "en" ? "zh" : "en");
    };

    return (
        <LanguageContext.Provider value={language}>
            <div>
                <button onClick={handleLanguageChange}>{languages[language]?.buttonText} </button>
                <h1>{languages[language]?.title}</h1>
                <ChildComponent />
            </div>
        </LanguageContext.Provider>
    );
}
export default App;

3. 在子组件中，使用 useContext Hook 来获取上下文对象的值：

// childComponent.js
import React, { useContext } from "react";
import LangContext from "./LangContext";
import languages from "./languageConfig";

export default function ChildComponent() {
    // 使用 useContext 获取当前语言
    const currentLang = useContext(LangContext);
    return (
        <div>
            <h2>{languages[currentLang]?.childTitle}</h2>
        </div>
    );
}

btw,这是多语言的js文件

const languages = {
    en: {
        title: "Hello World!",
        buttonText: "Switch to Chinese",
        childTitle: "This is a child component."
    },
    zh: {
        title: "你好，世界！",
        buttonText: "切换到英文",
        childTitle: "这是一个子组件"
    }
};

export default languages;

到这里就写完啦！

文章参考来源： useContext使用文档：react.dev/reference/r… createContext使用文档：react.dev/reference/r… 本文仅供参考，如有错漏之处请各位大佬多多指出。