ReactJS - createContext()_ReactJS 菜鸟教程

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

语法

const MyContext = createContext(defaultVal)

参数

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

返回值

createContext（） 函数返回一个上下文对象。此对象有两个组件：Provider 和 Consumer。提供者允许组件共享数据，而使用者允许组件访问该共享数据。

简单来说，createContext 就像创建一个特殊的房间，组件可以在其中放置他们想要共享的信息，而其他组件可以毫不费力地获取它。它使在 React 应用程序中共享数据更有序且不那么复杂。

例子

示例 - 在语言之间切换

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

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

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

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

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;

例如，如果我们单击“切换到印地语”选项，则问候语组件将变为说“你好，印地语！

完整代码

通过这种方式，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 钩子来创建一个简单的主题功能，其中组件的背景颜色根据选定的颜色主题进行更改。此应用程序的代码如下 -

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 钩子来实现主题切换功能。组件的背景颜色根据用户与按钮的交互在浅色和深色主题之间变化。下面给出了此应用程序的代码 -

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 传递到组件树的每个级别。当必须在应用程序的多个组件中交换数据时，这尤其有用。

<< ReactJS - lazy() ReactJS - cache() >>