ReactJS - 上下文

上下文是 React 中一个重要的概念。它提供了将信息从父组件传递到其所有子组件（到任何嵌套级别）的能力，而无需在每个级别都通过 props 传递信息。上下文将使代码更易读且更易于理解。上下文可以用来存储不更改或更改最少的信息。上下文的一些用例如下：

• 应用程序配置

• 当前已认证的用户的信息

• 当前用户设置

• 语言设置

• 应用程序/用户主题/设计配置

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

上下文是如何工作的？

让我们学习上下文的 基本概念以及它是如何工作的。上下文有四个部分：

• 创建一个新的上下文

• 在根组件中设置上下文提供者

• 在我们需要上下文信息的组件中设置上下文消费者

• 访问上下文信息并在渲染方法中使用它

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

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

create-react-app myapp
cd myapp
npm start

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

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 组件中的主题信息来设置 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

这里，

• 使用了 ThemeContext.Consumer，它是一个非可视组件，提供了访问当前主题上下文详细信息的功能

• 使用了函数表达式来获取 ThemeContext.Consumer 内部的当前上下文信息

• 使用了对象解构语法来获取主题信息并将值设置为 color 和 backgroundColor 变量。

• 使用主题信息通过 style props 设置组件的样式。

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

总结

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