ReactJS - 使用 useContext

---

---

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

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

React 提供了一个特殊的钩子，useContext 来访问和更新函数组件中的上下文信息。让我们在本章中使用 learn context 及其相应的钩子。

上下文是如何工作的？

在理解 useContext 钩子之前，让我们重新回顾一下 context 的基本概念及其工作原理。上下文有四个部分，

• 创建新上下文
• 在根组件中设置上下文提供程序
• 在需要上下文信息的组件中设置上下文使用者
• 访问上下文信息并在 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 变量中设置值。
• 使用主题信息通过样式属性为组件设置样式。

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

useContext 的签名

useContext的签名如下 -

 let contextValue = useContext( <contextName> )

这里

• contextName 是指要访问的上下文的名称。
• contextValue 是指引用的上下文的当前值。

使用钩子访问上下文的示例代码如下 -

 const theme = useContext(ThemContext)

通过钩子使用上下文

让我们更新我们的应用程序并使用上下文钩子而不是上下文使用者。

首先，将 HelloWorld 组件转换为函数组件。

import React from "react";
function HelloWorld() {
	 	return <div>Hello World</div>
}
export default HelloWorld

接下来，通过 useContext 钩子访问上下文的当前值

import React, { useContext } from "react"
import ThemeContext from '../ThemeContext'
function HelloWorld() {
	 	let theme = useContext(ThemeContext)
	 	return <div>Hello World</div>
}
export default HelloWorld

接下来，更新渲染函数以使用通过上下文获取的主题信息。

import React, { useContext } from "react"
import ThemeContext from '../ThemeContext'
function HelloWorld() {
	 	let theme = useContext(ThemeContext)
	 	return (
	 	 	 <div style={{
	 	 	 	 	color: theme.color,
	 	 	 	 	backgroundColor: theme.backgroundColor }}>
	 	 	 	 	 	 Hello World
	 	 	 </div>
	 	)
}
export default HelloWorld

在这里，我们有，

• 使用 useContext 访问 ThemeContext 上下文信息。
• 使用 ThemeContext 信息来设置文本的背景颜色和颜色。

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

更新上下文

在某些情况下，需要更新上下文信息。例如，我们可能会提供一个选项来按用户更改主题信息。当用户更改主题时，上下文应更新。更新上下文将重新呈现所有子组件，这将更改应用程序的主题。

React 提供了一个选项，可以使用 useState 和 useContext 钩子来更新上下文。让我们更新我们的应用程序以支持主题选择。

首先，更新根组件，App.js并使用 useState 钩子来管理主题信息，如下图所示 -

import './App.css'
import { useState } from 'react'
import HelloWorld from './components/HelloWorld'
import ThemeContext from './ThemeContext'
function App() {
	 	let initialTheme = {
	 	 	 color: 'white',
	 	 	 backgroundColor: 'green'
	 	}
	 	const [theme, setTheme] = useState(initialTheme)
	 	return (
	 	 	 <ThemeContext.Provider value={{ theme, setTheme }}>
	 	 	 	 	<HelloWorld />
	 	 	 </ThemeContext.Provider>
	 	);
}
export default App;

在这里，我们有，

• 使用 useState hook 在根组件的状态下设置主题信息。
• 主题更新函数，useState 返回的 useTheme 也作为主题信息的一部分包含在上下文中。

接下来，更新 HelloWorld 组件以获取上下文中存储的主题信息。

import React, { useContext } from "react"
import ThemeContext from '../ThemeContext'
function HelloWorld() {
	 	let { theme, setTheme } = useContext(ThemeContext)
	 	return (<div style={{
	 	 	 	 	 	 color: theme.color,
	 	 	 	 	 	 backgroundColor: theme.backgroundColor }}>
	 	 	 	 	<div>Hello World</div>
	 	 	 </div>)
}
export default HelloWorld

接下来，为用户提供一个选项，通过下拉选项更改主题。

import React, { useContext } from "react"
import ThemeContext from '../ThemeContext'
function HelloWorld() {
	 	let { theme, setTheme } = useContext(ThemeContext)
	 	return (<div style={{
	 	 	 color: theme.color,
	 	 	 backgroundColor: theme.backgroundColor }}>
	 	<div>
	 	 	 <select value={theme.backgroundColor}>
	 	 	 	 	<option value="green">Green</option>
	 	 	 	 	<option value="red">Red</option>
	 	 	 </select>
	 	 	 <div>Hello World</div>
	 	</div>)
}
export default HelloWorld

在这里，我们有，

• 添加了一个包含两个选项的下拉框：绿色和红色。
• 使用当前主题值 value={theme.backgroundColor 设置下拉框的当前值。

接下来，每当用户通过 onChange 事件更改主题时，请更新上下文。

import React, { useContext } from "react"
import ThemeContext from '../ThemeContext'
function HelloWorld() {
	 	let { theme, setTheme } = useContext(ThemeContext)
	 	return (<div style={{
	 	 	 color: theme.color,
	 	 	 backgroundColor: theme.backgroundColor }}>
	 	<div>
	 	 	 <select value={theme.backgroundColor}
	 	 	 	 	onChange = {
	 	 	 	 	 	 (e) => {
	 	 	 	 	 	 	 	setTheme({
	 	 	 	 	 	 	 	 	 ...theme,
	 	 	 	 	 	 	 	 	 backgroundColor: e.target.value
	 	 	 	 	 	 	 	})
	 	 	 	 	 	 }} >
	 	 	 	 	<option value="green">Green</option>
	 	 	 	 	<option value="red">Red</option>
	 	 	 </select>
	 	</div>
	 	 	 <div>Hello World</div>
	 	</div>)
}
export default HelloWorld

在这里，我们有，

• 将 onChange 事件附加到下拉框。
• 在事件处理程序中使用了 setTheme 函数，并将主题的背景颜色更新为用户选择的颜色。

根组件和 HelloWorld 组件的完整代码如下 &miinus;

import React, { useContext } from "react"
import ThemeContext from '../ThemeContext'
function HelloWorld() {
	 	let { theme, setTheme } = useContext(ThemeContext)
	 	return (<div style={{
	 	 	 color: theme.color,
	 	 	 backgroundColor: theme.backgroundColor }}>
	 	<div>
	 	 	 <select value={theme.backgroundColor}
	 	 	 	 	onChange= {
	 	 	 	 	 	 (e) => {
	 	 	 	 	 	 	 	setTheme({
	 	 	 	 	 	 	 	 	 ...theme,
	 	 	 	 	 	 	 	 	 backgroundColor: e.target.value
	 	 	 	 	 	 	 	})
	 	 	 	 	 	 }
	 	 	 	 	} >
	 	 	 	 	<option value="green">Green</option>
	 	 	 	 	<option value="red">Red</option>
	 	 	 </select>
	 	</div>
	 	 	 <div>Hello World</div>
	 	</div>)
}
export default HelloWorld

接下来，打开浏览器并检查应用程序。

当用户选择不同的背景颜色时，它将更新上下文，因此，它将重新渲染组件将新主题，如下所示 -

总结

上下文降低了在 react 应用程序中维护全局数据的复杂性。Context hook 通过简化访问和更新（通过 useState）上下文的过程，进一步降低了复杂性。