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

反应上下文

作者:互联网

反应上下文

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 /> );

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

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

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