标签：createContext React 反应 API useContext 组件 上下文
反应上下文
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() .两者都是 顾客 和一个 提供者 是 回来 .这 零件 被称为 提供者 ，顾名思义，将国家赋予其后代。
全部 这 成分 那会 要求 那 ” 店铺 ” 将其作为他们的 父母 它会 抓住 这 ” 店铺 。”一个 零件 那 利用 和 消耗 这 状态 是 已知 作为一个 消费者 .
如何使用上下文 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。