ReactJS - createContext()

CreateContext 是一个 React 函数，它允许我们为组件创建上下文。此函数提供或接收数据，而无需手动将 props 发送到组件树的每个级别。当数据需要在应用程序中的许多组件之间共享时，上下文是最重要的。

语法

const MyContext = createContext(defaultVal)

参数

defaultVal − defaultVal 是当读取上下文的组件上方的树中没有匹配的上下文提供程序时，我们希望上下文具有的值。如果我们没有逻辑默认值，请将其保留为 null。

返回值

createContext() 函数返回一个上下文对象。此对象有两个组件:提供者和消费者。 Provider 允许组件共享数据，Consumer 允许组件访问共享数据。

简单来说，createContext 就像创建一个特殊的房间，组件可以把想要共享的信息放在那里，其他组件可以毫不费力地获取这些信息。它使 React 应用中的数据共享更加有条理，也更简单。

示例

示例 − 在语言之间切换

React 中的 Context 允许组件共享数据而无需通过 props 传递数据。下面是一个简单的示例 − 创建和使用 context 的方法

创建 context − 在下面的代码中，我们创建了一个默认值为"English"的 LanguageContext。

import { createContext } from 'react';
const LanguageContext = createContext('English');

在组件中使用上下文 − 在下面的代码中，Greeting 组件现在可以访问 LanguageContext，而无需将其作为 prop 接收。

import React, { useContext } from 'react';

function Greeting() {
   const language = useContext(LanguageContext);   
   return <p>{`Hello, ${language}!`}</p>;
}

在更高级别的组件中，包含以下上下文值 −

在 App 组件中，我们使用 LanguageContext.Provider 提供上下文值，在我们的例子中它是"语言"。此上下文将传递给 Greeting 组件及其中包含的任何其他组件。当语言发生变化时，它们将自动更新。

import React, { useState } from 'react';

function App() {
   const [language, setLanguage] = useState('English');   
   return (
      <LanguageContext.Provider value={language}>
      <Greeting />
      <button onClick={() => setLanguage('Hindi')}>Switch to Hindi</button>
      </LanguageContext.Provider>
   );
}

export default App;

例如，如果我们点击"切换到印地语"选项，Greeting 组件将更改为说"Hello, Hindi!"

完整代码

这样，Context 提供了一种干净、高效的方式来在我们的 React 应用程序中传递数据，而无需手动将其传递到组件树的每个级别。

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

// 创建一个 LanguageContext
const LanguageContext = createContext('English');

// 创建一个 Greeting 组件
function Greeting() {
   const language = useContext(LanguageContext);   
   return <p>{`Hello, ${language}!`}</p>;
}

// 创建应用程序组件
function App() {
   const [language, setLanguage] = useState('English');   
   return (
      <div style={{marginLeft: '500px'}}>
      <LanguageContext.Provider value={language}>
         <Greeting />
         <button onClick={() => setLanguage('Hindi')}>Switch to Hindi</button>
      </LanguageContext.Provider>
      </div>
   );
}

export default App;

输出

示例 − 更改背景颜色应用

此 React 应用展示了如何使用 createContext、useContext 和 useState Hooks(钩子)来创建一个简单的主题功能，其中组件的背景颜色根据所选的颜色主题而变化。此应用的代码如下所示 −

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

// 创建 ColorContext
const ColorContext = createContext('lightblue');

// 创建 ThemedComponent 组件
function ThemedComponent() {
    const color = useContext(ColorContext);
    return <div style={{ backgroundColor: color, padding: '20px' }}>Themed
    Component</div>;
}

// 创建 ColorApp 组件
function ColorApp() {
   const [color, setColor] = useState('lightblue');
   return (
      <div>
         <ColorContext.Provider value={color}>
            <ThemedComponent />
            <button onClick={() => setColor('lightblue')}>Switch to blue</button>
            <button onClick={() => setColor('lightpink')}>Switch to Pink</button>
         </ColorContext.Provider>
      </div>
   );
}
export default ColorApp;

输出

示例 − 主题切换器应用

此 React 应用展示了如何使用 createContext、useContext 和 useState Hooks(钩子)来实现主题切换功能。组件的背景颜色会根据用户与按钮的交互在浅色和深色主题之间切换。此应用的代码如下所示 −

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

// 创建 ThemeContext
const ThemeContext = createContext('light');

// 创建 ThemedContent 组件
function ThemedContent() {
   const theme = useContext(ThemeContext);
   return <div style={{ background: theme === 'light' ? '#fff' : '#333', padding: '20px' }}>Themed Content</div>;
}

// 创建 ThemeSwitcherApp 组件
function ThemeSwitcherApp() {
   const [theme, setTheme] = useState('light');
   return (
      <div>
         <ThemeContext.Provider value={theme}>
         <ThemedContent />
         <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
         </ThemeContext.Provider>
      </div>
   );
}

export default ThemeSwitcherApp;