如何使用React Context API

在这一部分中，我们将了解React上下文API，所以React context API是react hooks提供的一个概念，React context API允许我们轻松访问组件树不同级别的数据，而无需在每个级别都使用props。

简单地说，在上下文 API 的帮助下，那些没有直接连接到父组件的组件可以访问数据。通常，在React应用程序中，数据是在props的帮助下从上到下传递的。但是当我们尝试在更高层次的层次结构中使用props传递数据时，它变得更加复杂。所以对于这个问题，context API提供了巨大的价值，也提供了最好的性能。

为什么我们需要使用 Context API？

所以我们在这里有一个例子，正如你所看到的，我们有一个父组件，它有一个子组件，这个子组件还有另一个子组件。

现在，假设子组件 C 想要从父组件访问数据。然后按照传统的方式，父组件通过props将自己的数据传给A组件，A组件再传给B组件，B组件再传给C组件，这就是所谓的prop drilling。

正如您所看到的，这就是问题所在，因为数据是通过两个实际上不需要该数据的组件传递的。你可以想象它在更高的组件树上有大约 10 个组件，然后你必须通过这些组件传递数据。

但是Context API为我们提供了将数据直接传递给组件 C 或需要的组件的功能。

React上下文 API：它是如何工作的？

首先，我们需React.createContex返回一个消费者和一个提供者。顾名思义，Provide是一个组件为其子组件提供状态。简单地说，它保存和存储数据。Consumer顾名思义，它使用提供的数据。

我们简单地创建一个createContext具有提供者和消费者的。然后我们可以使用provider组件发送数据，我们需要在需要的组件中导入该组件，然后我们可以使用 consumer 来获取该需要的组件中的数据。

如何使用 React 上下文 API？

反应.createContext

import React, { createContext } from "react";const UserContext = createContext(defaultValue);

通过这几行代码，我们可以创建一个createContext的对象。当组件获得订阅此上下文对象的渲染时，它只需createContext从最接近的匹配提供者读取当前值。

它还有一个defaultValue参数，仅在没有可用的匹配提供程序时使用。

上下文提供者

<UserContext.Provider value={/* some value */}>

context 对象带有Provider组件，它允许其他组件使用Consumer组件使用数据。这个Provider可以有很多Consumers可以从中获取数据。

该 Provider组件接收一个名为 的道具 value，消费者可以访问该道具。

上下文.消费者

<UserContext.Consumer>  {(values) => <h1>{value}</h1>}</UserContext.Consumer>

要访问消费者中的提供者数据，我们需要首先导出数据值。消费者组件用于从提供者那里获取数据。

注意： Provider和Consumer是预定义组件，已经在createContext.

反应上下文 API 示例

现在让我们通过一个非常基本和简单的例子来理解上下文API：

应用程序.js

import React, { createContext} from 'react';import ComA from './ComA';const Firstname= createContext();const App =() =>{  return(    <>      <Firstname.Provider value={"ReactJS Guru"}>        <ComA />      </Firstname.Provider>    </>  );};export default App;export { Firstname };

ComA.js

import ComB from './ComB'export default function ComA(){    return(    <>        <ComB />    </>);}

ComB.js

import ComC from './ComC'export default function ComB(){    return(    <>        <ComC />    </>);}

comC.js

import {Firstname} from './App'export default function ComC(){    return(    <>        <Firstname.Consumer>            { (fname)=>{                return(<h1>My Name is {fname}</h1>);            } }        </Firstname.Consumer>    </>);}

现在你可以看到，我们这里有组件树层次结构，其中我们有 3 个组件，我们的父组件是 App.js 组件。App组件导入了ComA组件，ComA组件导入了ComB组件，最后ComB组件导入了ComC。很简单，它就是我们的组件树。

现在，我们需要将数据从父组件传递给 ComC 组件。为此，我们导入createContext了 ，并且在父组件中创建了它的对象。然后，我们在 的帮助下访问了提供者组件Firstname.Provider。在这里，Firstname 是我们的上下文对象，我们可以Provider用“.”来调用我们的。操作员。

我们必须传递要与Provider组件内的其他组件共享的数据。最后，我们在花括号 {} 中导出了Firstname。

现在我们在使用context API时不需要触及ComB和ComC。我们将直接跳转到ComC 组件。在这里我们导入了Firstname对象，之后我们刚刚使用Firstname调用了Consumer组件。

现在您可能会想，为什么可以访问 Consumer 组件，因为在 ComC 中我们没有导入createContext. 所以正如我们之前讨论的，Firstname是我们的上下文对象，它有提供者和消费者组件，所以我们不需要在createContext这里导入。

之后，我们只需要调用Consumer组件即可，这个Consumer组件总是带有一个函数，这就是我们使用回调函数的原因，它也有一个return语句。