ReactJS - createContext()

---

---

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

语法

const MyContext = createContext(defaultVal)

参数

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

返回值

createContext() 函数返回一个上下文对象。此对象有两个组件：Provider 和 Consumer。Provider 允许组件共享数据，而 Consumer 允许组件访问该共享数据。

简单来说，createContext 就像创建一个特殊的房间，组件可以将他们想要共享的信息放在其中，而其他组件可以在不费吹灰之力的情况下获取它。它使在 React 应用中共享数据更有条理且不那么复杂。

示例

示例 - 在语言之间切换

React 中的上下文允许组件共享数据，而无需将其通过 props 传递。以下是如何使用一个简单的示例创建和使用上下文 -

创建上下文 - 在下面的代码中，我们创建了一个 LanguageContext，其默认值为“English”。

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 来提供上下文值，在我们的例子中是“language”。此上下文将传递给 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;

例如，如果我们点击“切换到 Hindi”选项，Greeting 组件将更改为显示“Hello, Hindi!”。

完整代码

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

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

// Create a LanguageContext
const LanguageContext = createContext('English');

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

// Create the App component
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 hook 的用法，用于创建一个简单的主题功能，其中组件的背景颜色根据所选颜色主题更改。此应用的代码如下所示 -

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

// Create a ColorContext
const ColorContext = createContext('lightblue');
// Create a ThemedComponent component
function ThemedComponent() {
   const color = useContext(ColorContext);
   return <div style={{ backgroundColor: color, padding: '20px' }}>Themed
   Component</div>;
}

// Create the ColorApp component
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 hook 的用法，用于实现主题切换功能。组件的背景颜色在浅色和深色主题之间切换，具体取决于用户与按钮的交互。此应用的代码如下所示 -

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

// Create a ThemeContext
const ThemeContext = createContext('light');

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

// Create the ThemeSwitcherApp component
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;

输出

总结

在本教程中，我们了解了 React 函数 createContext，它简化了为组件创建上下文的步骤。createContext 的主要目标是允许组件共享或接收数据，而无需手动将 props 传递到组件树的每个级别。当数据需要在应用程序的多个组件之间交换时，这尤其有用。