ReactJS - 上下文

上下文是 React 中的重要概念之一。它提供了将信息从父组件传递到其所有子组件到任何嵌套级别的能力，而无需通过每个级别的 props 传递信息。上下文将使代码更具可读性和更易于理解。上下文可用于存储不会更改或更改很小的信息。上下文的一些用例如下 -

• 应用程序配置
• 当前经过身份验证的用户信息
• 当前用户设置
• 语言设置
• 按应用程序/用户划分的主题/设计配置

在本章中，让我们学习如何创建上下文及其用法。

上下文是如何工作的？

让我们学习上下文的基本概念及其工作原理。上下文有四个部分，

• 创建新上下文
• 在根组件中设置上下文提供程序
• 在需要上下文信息的组件中设置上下文使用者
• 访问上下文信息并在 render 方法中使用它

让我们创建一个应用程序来更好地理解上下文及其用法。让我们创建一个全局上下文，用于在应用程序根组件中维护主题信息，并在我们的子组件中使用它。

首先，使用以下命令创建并启动一个应用程序，

接下来，在组件文件夹 （src/components/HelloWorld.js） 下创建一个组件 HelloWorld

import React from "react";
import ThemeContext from "../ThemeContext";
class HelloWorld extends React.Component {
	 	render() {
	 	 	 return <div>Hello World</div>
	 	}
}
export default HelloWorld

接下来，使用新的上下文 （src/ThemeContext.js） 进行创建，以维护主题信息。

import React from 'react'
const ThemeContext = React.createContext({
	 	color: 'black',
	 	backgroundColor: 'white'
})
export default ThemeContext

这里

• 使用 React.createContext 创建一个新上下文。
• 上下文被建模为具有样式信息的对象。
• 设置文本的颜色和背景的初始值。

接下来，更新根组件，App.js通过包含 HelloWorld 组件和主题提供程序以及主题上下文的初始值来更新。

import './App.css';
import HelloWorld from './components/HelloWorld';
import ThemeContext from './ThemeContext'

function App() {
	 	return (
	 	 	 <ThemeContext.Provider value={{
	 	 	 	 	color: 'white',
	 	 	 	 	backgroundColor: 'green'
	 	 	 }}>
	 	 	 <HelloWorld />
	 	 	 </ThemeContext.Provider>
	 	);
}
export default App;

这里使用 ThemeContext.Provider，它是一个非视觉组件，用于设置要在其所有子组件中使用的主题上下文的值。

接下来，在 HelloWorld 组件中包含上下文使用者，并在 HelloWorld 组件中使用主题信息设置你好世界消息的样式。

import React from "react";
import ThemeContext from "../ThemeContext";
class HelloWorld extends React.Component {
	 	render() {
	 	 	 return 	(
	 	 	 	 	<ThemeContext.Consumer>
	 	 	 	 	{({color, backgroundColor} ) =>
	 	 	 	 	 	 (<div style={{
	 	 	 	 	 	 	 	color: color,
	 	 	 	 	 	 	 	backgroundColor: backgroundColor }}>
	 	 	 	 	 	 	 	Hello World
	 	 	 	 	 	 </div>)
	 	 	 	 	}
	 	 	 	 	</ThemeContext.Consumer>
	 	 	 )
	 	}
}
export default HelloWorld

这里

• 使用了 ThemeContext.Consumer，这是一个非视觉组件，提供对当前主题上下文详细信息的访问
• 使用函数表达式获取 ThemeContext.Consumer 内部的当前上下文信息
• 使用对象解构语法获取主题信息，并在 color 和 backgroundColor 变量中设置值。
• 使用主题信息通过样式属性为组件设置样式。

最后，打开浏览器并检查应用程序的输出

总结

上下文降低了在 react 应用程序中维护全局数据的复杂性。它提供了一个清晰的提供者和消费者概念，并简化了上下文的实现。