在这一部分中,我们将了解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
是一个组件为其子组件提供状态。简单地说,它保存和存储数据。Consume
r顾名思义,它使用提供的数据。
我们简单地创建一个createContex
t具有提供者和消费者的。然后我们可以使用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语句。