ReactJS - Context 上下文

更新于 2025/3/23 6:07:17

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

应用程序配置
当前已验证用户的信息
当前用户设置
语言设置
应用程序/用户的主题/设计配置

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

上下文如何工作?

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

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

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

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

create-react-app myapp
cd myapp
npm start

接下来，在 components 文件夹 (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 创建一个新上下文。
上下文被建模为具有样式信息的对象。
设置文本颜色和背景的初始值。

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

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 组件中的主题信息来设置 hello world 消息的样式。

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

这里，