如何在 React 和 React 挂钩中使用上下文 API

介绍

在本文中,您将研究如何在您的 React 项目中实现 Context API和 React Hook useContext()。

React Hooks 是作为状态和生命周期方法编写在功能组件中的模块化替代品的函数,该 useContext() 方法是通过组件树进行推进钻探的替代品,并创建了一个内部的全球状态来传输数据。

前提条件

要了解更多关于 React 的信息,请参阅 How To Code in React系列

建议对 React Hooks 的通用知识,但不需要。

查看背景 API

要检查 Context API,让我们来谈谈如何在 React 应用程序中访问文本。React 提供createContext()方法来帮助传输数据作为支持。

在ColorContext.js文件中,设置一个颜色对象,并将一个属性作为一个参数传递到createContext()方法:

1[label ColorContext.js]
2const colors = {
3  blue: "#03619c",
4  yellow: "#8c8f03",
5  red: "#9c0312"
6};
7
8export const ColorContext = React.createContext(colors.blue);

这将允许 .createContext() 方法订阅 colors.blue 属性作为一个组件到另一个组件的支持。

接下来,您可以将 .Provider 组件应用于其他文件中的文本中。 .Provider 组件在整个应用程序中启用您的文本中的数据。在您的 index.js 文件中,导入您的 ColorContext 函数,并在返回声明中附加到 .Provider 组件:

 1[label index.js] 
 2import React from 'react';
 3import { ColorContext } from "./ColorContext";
 4
 5function App() {
 6  return (
 7    <ColorContext.Provider value={colors}>
 8      <Home />
 9    </ColorContext.Provider>
10  );
11}

这将您的ColorContext函数的背景包裹到您的应用程序的颜色上,而您的ColorContext函数存在于组件树中,而.Provider组件将促进其整个功能。

您还可以应用 .Consumer 组件来订阅背景的更改。这在类和功能组件中都可用。 .Consumer 组件只能在返回声明中访问。

1[index.js]
2return (
3  <ColorContext.Consumer>
4    {colors => <div style={colors.blue}>Hello World</div>}
5  </ColorContext.Consumer>
6);

每当环境发生变化时,.Consumer 组件将根据修改更新和调整您的应用程序。

您可以给您的组件一个背景类型: MyComponent.contextType = ColorContext;然后,您可以访问您的组件中的背景: let context = this.context;,这允许您在 JSX 之外访问您的背景。

您还可以通过类组件的 .contextType 属性声明一个背景,并将其值分配给 ColorContext 函数. 您还可以将您的 ColorContext 函数分配给 static contextType 背景 API。

使用`useContext()`方法

「useContext()」方法接受函数组件中的一个背景,并在一次调用中与「.Provider」和「.Consumer」组件一起工作. 在您的「index.js」文件中,导入「useContext()」方法和「ColorContext」函数,并声明函数组件:

1[label index.js]
2import React, { useContext } from "react";
3import ColorContext from './ColorContext';
4
5const MyComponent = () => {
6  const colors = useContext(ColorContext);
7
8  return <div style={{ backgroundColor: colors.blue }}>Hello World</div>;
9};

函数组件MyComponent将您的ColorContext中的值设置为对useContext()方法的参数。您的返回声明适用于应用程序的背景颜色。当发生更改时,useContext()方法会订阅最新背景值的更新。

结论

React 的 Context API 为您提供内置的函数和组件,以避免在组件树中进行推进钻探. React Hook useContext() 在一次调用中应用相同的功能,以简化功能的组件体。

请参阅 React 主题页面以获取其他项目和资源。

如何在 React 和 React 挂钩中使用上下文 API

介绍

前提条件

查看背景 API

使用useContext()方法

结论

使用`useContext()`方法