介绍

在本文中，您将研究如何在您的 React 项目中实现Context API和 React Hook useContext()。Context API 是一种 React 结构，允许您共享来自应用程序各个级别的特定数据，并有助于解决螺旋钻。

React Hooks 是一种函数，可作为用函数式组件编写的状态和生命周期方法的模块化替代品。该useContext()方法是通过组件树进行 prop-drilling 的替代方法，并创建一个内部全局状态来传递数据。

先决条件

• 需要了解 React。要了解有关 React 的更多信息，请查看如何在 React系列中编码。
• 建议具备 React Hooks 的一般知识，但不是必需的。要了解有关 React Hooks 的更多信息，请查看教程如何在 React 项目中应用 React Hooks。

检查上下文 API

为了检查 Context API，让我们了解如何在 React 应用程序中访问上下文。React 提供了createContext()帮助将数据作为 prop 传递的方法。

在您的ColorContext.js文件中，设置一个colors对象并将一个属性作为参数传递给该createContext()方法：

const colors = {
  blue: "#03619c",
  yellow: "#8c8f03",
  red: "#9c0312"
};

export const ColorContext = React.createContext(colors.blue);

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

接下来，您可以将.Provider组件应用于另一个文件中的上下文。该.Provider组件在整个应用程序中启用上下文中的数据。在您的index.js文件中，导入您的ColorContext函数并附加到.Provider您的 return 语句中的组件：

 import React from 'react';
import { ColorContext } from "./ColorContext";

function App() {
  return (
    <ColorContext.Provider value={colors}>
      <Home />
    </ColorContext.Provider>
  );
}

这包装了您的ColorContext函数的上下文来为您的应用程序着色。虽然您的ColorContext功能存在于组件树中，但该.Provider组件将始终促进其功能。在这里，Home组件将吸收您ColorContext函数中的数据。的子组件也Home将从中获取数据ColorContext。

您还可以应用该.Consumer组件来订阅上下文的更改。这在类和功能组件中都可用。该.Consumer组件只能在 return 语句中访问。在您的index.js文件中，在 return 语句中.Consumer为您的ColorContext函数设置一个组件：

[index.js]
return (
  <ColorContext.Consumer>
    {colors => <div style={colors.blue}>Hello World</div>}
  </ColorContext.Consumer>
);

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

你可以给你的组件一个上下文类型：MyComponent.contextType = ColorContext;然后，你可以在你的组件中访问上下文：let context = this.context;并且允许你在 JSX 之外访问你的上下文。或者，您可以将static contextType = ColorContext;. 这对于基于类的组件非常有效，因为它简化了如何将上下文带入组件中。但是，它不适用于功能组件。

您还可以.contextType使用类组件上的属性声明上下文，并将其值分配给ColorContext函数。您还可以将您的ColorContext功能分配给static contextTypeContext API。这些方法仅适用于类组件。让我们回顾一下如何在功能组件中调用上下文。

处理useContext()方法

该useContext()方法接受功能组件内的上下文，并在一次调用中.Provider与.Consumer组件一起工作。在您的index.js文件中，导入useContext()方法和ColorContext函数，并声明一个功能组件：

import React, { useContext } from "react";
import ColorContext from './ColorContext';

const MyComponent = () => {
  const colors = useContext(ColorContext);

  return <div style={{ backgroundColor: colors.blue }}>Hello World</div>;
};

功能组件MyComponent将您中的值设置ColorContext为useContext()方法的参数。您的 return 语句在您的应用程序中应用背景颜色。当更改触发时，该useContext()方法将使用最新的上下文值订阅更新。与 Context API 相比，该useContext()方法允许您以更少的代码行在整个应用程序中共享和传递数据。

结论

React 中的 Context API 为您提供了内置函数和组件，以避免在您的组件树中进行 prop-drilling。React HookuseContext()在一次调用中将相同的功能应用到精简的功能组件主体中。

查看React 主题页面以获取其他项目和资源。