您的位置:首页 > 百科大全 |

如何使用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语句。