正确使用 React Context API（节省时间）

大家好！我是 Itay，一位全栈 Web 开发者，专攻前端后端代码，尤其擅长 React.js。今天，我将教大家一些实用的代码技巧，助你提升代码库性能。

您将学到什么

• 上下文 API 的缺陷
• 逻辑包装器工厂
• 动作工厂

开始之前

我想介绍一下我编写上下文提供程序的常用方法，这样我就可以编写自定义组件和钩子，并且您无需过多解释就能理解它们的含义。如果您希望我以后做一个更简单的上下文教程，请在评论区告诉我。

上下文 API 的缺陷

Context API 是 React 中管理状态的最先进的方法。它是 Redux、MobX 以及社区提供的众多状态管理库的替代方案。

重复性任务

几乎每次我在前端应用程序中使用 Context API 时，我都会遇到同样的事情：创建一个 AuthContext，如下所示：

然后，我在我的应用程序的任何地方使用登录状态：

想象一下，如果你的应用中有 60 个需要身份验证的组件，你的代码库会变得一团糟！

这种方法有什么问题？

• 混乱的代码
• 一直重复大量代码

很容易弄乱你的代码库

假设您有一个上下文和一个附加到它的 ContextProvider 组件。

在提供上下文的同一组件中，您想要使用按钮的上下文，如下例所示：

你想做一些非常简单的事情，但最终却弄乱了你的代码库。作为一种解决方法，你可以这样做：

但现在，我们又回到了重复性任务区域。

组件工厂来帮忙

组件工厂是一个返回 React 函数组件的函数。
例如：() => () => <div></div>

我们可以使用组件工厂来清理代码库，并创建简洁的代码结构。今天，我将教你两个省时又省力的工厂：上下文逻辑包装器和上下文动作工厂。

逻辑包装器

逻辑包装器解决了我们一开始提到的条件渲染问题，而且不会弄乱你的代码库。你可以使用以下函数创建它们：

那么，我们之前的问题只需几行代码就可以解决：

通过对您创建的每个上下文使用此组件工厂，您可以节省大量时间。

上下文操作

由于其构建方式，上下文操作是高度可重用的组件。

ComponentB现在，我们只需一行代码即可创建！

现在你必须问自己——为什么要在上下文操作中添加 className 属性？原因很简单：可重用性。最好的演示方法是通过示例：

总结

你想了解如何在操作按钮中添加图标吗？如何使用 TypeScript 来实现这些图标？请在下方评论区留言告诉我。

下一集，我们将讨论如何使用 React 增强表单功能！想看的话，请关注我。

查看组件工厂的实际运行情况（在分支 1.1.2）：