首页 > 其他分享> > 反应上下文

反应上下文

2022-09-04 10:02:42 作者：互联网

反应上下文

React Context

D 耳朵伙计们： 反应上下文 API 今天将讨论。 React 最好的特性之一是 React Context API。
如果你有兴趣，你应该继续阅读，因为这将是一个了不起的。

React Tree Node

R 行动的语境允许通过数据通过组件树没有 必须通过道具 手动向下 每个级别。

React 应用程序可以创建全局变量，这些变量可以通过使用 反应上下文 API .

语境也被提升为 ** 更简单** , ** 打火机** 的方法还原状态管理。

上下文 API 是 React 16.3 实现的（一种）新特性 简单的 和 简单的 至交换状态在整个 全部的 项目。

首先，让我告诉你什么是问题，

有许多嵌套组件。堆栈的顶部和底部组件都需要访问状态。 换句话说 , 我们有很多 嵌套组件 .组件 在堆栈的顶部和底部 需要 进入国家 .

当我们需要来自父组件的子组件的数据时，数据会通过所有父节点到达子节点。

在 React 16.3 版本之前，我们需要经过数据之间一个父母组件和一个孩子组件所以，这个过程被称为道具钻孔 .

在我们的应用程序上，道具是数据我们经过或者可以访问从任意数量的孩子成分下来自 顶级组件。

没有上下文 ，我们需要将状态传递为“ 道具 ” 通过每个嵌套组件。这就是所谓的 ” 支柱钻孔 ”。

Props Drilling way

在上图中，数据从根 App 组件传递到最后一个子组件以访问数据，在这种方法之间，数据从每个父组件传递到子组件。

解决方案 -

上下文 API -

React 应用程序可以创建可以通过使用 React Context API 传递的全局变量。
反应上下文 是一种管理状态的方法全球 .

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

你只需要 React.createContext() .两者都是顾客和一个 提供者 是回来 .这零件被称为 提供者 ，顾名思义，将国家赋予其后代。

全部这成分那会要求那 ” 店铺 ” 将其作为他们的父母它会抓住这 ” 店铺。”一个零件那利用和消耗这状态是已知作为一个 消费者 .

React 的官方文档页面有更多详细信息。

如何使用上下文 API？

我们正在使用功能组件。所以我们必须使用 useContext 钩子来实现上下文 API。

创建上下文 -

要创建上下文，您必须导入 createContext 并对其进行初始化：

 导入 { useState, createContext } from "react";  
 从“react-dom/client”导入 ReactDOM；  
  
 const UserContext = createContext()

现在接下来我们将使用 Context Provider 来包装需要状态 Context 的组件树。

上下文提供者 -

将所有子组件包装在 Context Provider 中并提供状态值。

 函数应用程序（）{  
 const [user, setUser] = useState("Jesse Hall");  
  
 返回 （  
 <UserContext.Provider value={user}>  
 <h1>{`你好 ${user}！`}</h1>  
 <Child1 user={user} />  
 </UserContext.Provider>  
 );  
 }

现在，此树中的所有组件都可以访问用户上下文。

`使用上下文 -`

我们必须使用 使用上下文 挂钩以便在子组件中使用它。

第一的 ，记得添加useContext 进口陈述：

 导入 { useState, useContext } from "react";

然后，您可以在所有组件中访问用户上下文：

 函数 Child8() {  
 常量用户 = useContext(UserContext);  
  
 返回 （  
 <>  
 <h1>组件 5</h1>  
 <h2>{`你好 ${user} 再次！`}</h2>  
 </>  
 );  
 }

完整示例 -

 从“反应”导入{ useState，createContext，useContext}；  
 从“react-dom/client”导入 ReactDOM；  
  
 常量 UserContext = createContext();  
  
 函数 Child1() {  
 const [user, setUser] = useState("Jesse Hall");  
  
 返回 （  
 <UserContext.Provider value={user}>  
 <h1>{`你好 ${user}！`}</h1>  
 <Child2 />  
 </UserContext.Provider>  
 );  
 }  
  
 函数 Child2() {  
 返回 （  
 <>  
 <h1>孩子 2</h1>  
 <Child3 />  
 </>  
 );  
 }  
  
 函数 Child3() {  
 返回 （  
 <>  
 <h1>孩子 3</h1>  
 <Child4 />  
 </>  
 );  
 }  
  
 函数 Child4() {  
 返回 （  
 <>  
 <h1>孩子 4</h1>  
 <Child5 />  
 </>  
 );  
 }  
  
 函数 Child5() {  
 常量用户 = useContext(UserContext);  
  
 返回 （  
 <>  
 <h1>孩子 5</h1>  
 <h2>{`你好 ${user} 再次！`}</h2>  
 </>  
 );  
 }  
  
 const root = ReactDOM.createRoot(document.getElementById('root'));  
 根.渲染（<Child1 /> );

我们有一些替代和简单的工具来管理数据 -

谢谢阅读！！
更多故事请关注我！！

本文链接：https://www.qanswer.top/11988/40120409

标签：createContext,React,反应,API,useContext,组件,上下文
来源： https://www.cnblogs.com/amboke/p/16654318.html