理解反应上下文
理解反应上下文
A 如何指导使用 React Context
概括：
对于那些不知道的人，道具钻探是当您需要将道具从一个组件传递给几个后代时遇到的情况，以便将这些数据传递给一个深度嵌套的组件。
React Context 是一种在组件之间共享数据的方式，无需通过每个子组件向下传递。在处理应用程序的多个实例时（例如，在构建 API 时），您可以使用 React Context。
上下文消费者/提供者模式是一种通过以有组织的方式在组件之间传递数据来管理应用程序状态的方法。
你想知道更多吗。阅读下面的深入文章：
退后一步……
如果你想一想，自上而下的数据流赋予了 React 超能力。
- 您可以更好地控制您的数据。没有更多的早期 JS 日子，您需要浏览大量的 JS 文件并找出是什么改变了您的状态。
- 调试起来更容易，因为你知道什么来自哪里
但是，如果我们正在构建一个深度嵌套的应用程序呢？
常量应用 = () => {
返回 （
<div>
应用内容
<Toolbar theme={store.theme} />
</div>
);
};
常量工具栏 = ({ 主题 }) => {
返回 （
<div>
<Button theme={theme} label="Button 1" />
<Button theme={theme} label="Button 2" />
</div>
);
};
常量按钮 = ({ 主题，标签 }) => {
返回 （
<button style={{ backgroundColor: theme === "dark" ? "black" : "white" }}>
{标签}
</button>
);
};
这称为 prop-drilling，如果您在数据源和用户之间有更多层的组件，情况会变得更糟。如何解决这
使用 Context API 解决道具钻孔问题
Context API 允许您通过使用上下文提供程序包装您的状态/数据到多个组件来广播它们。将您的状态作为值属性传递给 contextProvider，然后子组件可以使用上下文使用者或 useContext Hook 访问此提供程序。
Data Flow in Prop Drilling vs Context API
第 1 步：创建上下文
// ThemeContext.jsx
从“反应”导入反应；
常量 ThemeContext = React.createContext();
导出默认 ThemeContext；
第 2 步：上下文提供者：
现在我们可以用上下文提供者包装所有上下文用户，并传递我们想要“广播”的值。
常量应用 = () => {
返回 （
<ThemeContext.Provider value={{ theme: store.theme }}>
应用内容
<Toolbar />
</ThemeContext.Provider>
);
};
现在，我们如何从其后代工具栏 Button 访问主题？
第三步：上下文消费者：useContext
要访问上下文，我们使用来自 Component 的任何后代的 useContext 钩子 应用程序 .
从“反应”导入反应；
从“./ThemeContext”导入{ ThemeContext}；
常量按钮 = ({ 主题，标签 }) => {
常量 { 主题 } = React.useContext(ThemeContext);
返回 （
<button style={{ backgroundColor: theme === "dark" ? "black" : "white" }}>
{标签}
</button>
);
};
瞧！我们渲染的输出保持不变，但下面的代码更精简和更清晰。
就这样！我希望我能帮助澄清您为什么需要上下文以及如何实现它。随意张贴任何问题，意见或任何建议。
有关更多信息，我强烈建议您访问官方文档并阅读他们的教程 这里 .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
