反应上下文
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,组件,上下文 From： https://www.cnblogs.com/amboke/p/16654318.html