React - 高阶组件 (HOC)
在不断发展的 Web 开发领域，掌握高级概念对于创建强大而灵活的应用程序至关重要。在本文中，我们将深入研究这些基本React概念之一：高阶组件，通常称为 HOC。
无论您是寻求先进技术的经验丰富的开发人员，还是渴望学习的好奇初学者，我们都将逐步介绍 HOC 的创建和应用。准备好利用这种强大的方法丰富您的开发工具包，同时探索如何增强代码的可读性、可重用性和可维护性。
什么是高阶组件？
想象一下，您拥有一家糕点店，并且专门制作各种糕点。在你的糕点店里，你可以买到羊角面包、松饼和丹麦面包。每个糕点必须有一个标签，标明其类型和成分。如果您对每个糕点都手动执行此操作，则需要大量时间。您可以使用“机器人”自动为您执行此操作，而不是手动执行此操作。
这个机器人是一个高阶组件（HOC） ，一个接受组件（你的糕点）并返回带有附加功能或特性（在本例中是指示其类型和成分的标签）的糕点的函数。
优点
高阶组件 (HOC) 提供了几个显着的优势，可以增强我们开发 React 应用程序的方式。以下是其中一些优点，并附有具体示例：
- 可重用性：HOC 的一大优势是它们能够在应用程序的不同部分中重用。由于 HOC 是具有特定逻辑的函数，因此您可以对其进行自定义以满足您的需求，同时保持灵活性。例如，身份验证 HOC 可以适用于处理对不同类型内容的访问。
- 关注点分离：HOC 允许将这些职责分离到不同的组件中，而不是用多个不同的逻辑使组件变得混乱。您可以轻松设想为每个逻辑创建一个单独的 HOC，从而使您的组件更加清晰、组织得更好。
- 代码模块化：HOC 向您的代码添加模块化层。您可以添加或删除 HOC，而不影响底层组件的功能，从而使应用程序的维护和调整变得更加容易。本质上，HOC 嵌套不会改变整体稳定性。
- 促进单元测试：由于其独立的性质，HOC 简化了单元测试。您可以测试 HOC 的特定逻辑，而无需应用程序其他部分的复杂性。
通过结合这些优势，您将能够创建更灵活且可维护的应用程序，同时最大限度地减少代码重复。
实际案例
问题
让我们举一个具体的例子来说明高阶组件的相关性。假设我们正在开发一个带有身份验证系统的应用程序。在此应用程序中，界面的不同部分需要身份验证：
- 主页：此页面不需要身份验证。
- 书籍列表：无需身份验证即可查看此列表。
- 热门书籍：此部分专为经过身份验证的用户保留。
- 用户评分：同样，只有登录用户才能查看评分。
假设我们有一个导入所有其他组件的组件：
export const App = () => {
return (
<div>
<Home />
<BooksList />
<TopBook />
<UsersRating />
</div>
)
}
现在，让我们考虑每个部分的组件：
export const Home = () => {
return (
<div>
<h1>Hey !</h1>
<p>This is a welcome message !</p>
</div>
)
}
export const BooksList = () => {
return (
<div>
<p>Books list</p>
</div>
)
}
export const TopBook = () => {
const isConnected = false
if(!isConnected) {
return (
<p>You don't have access !</p>
)
}
return (
<div>
<p>Top Book</p>
</div>
)
}
export const UsersRating = () => {
const isConnected = false
if(!isConnected) {
return (
<p>You don't have access !</p>
)
}
return (
<div>
<p>UsersRating</p>
</div>
)
}
我们注意到具有限制逻辑的两个组件重复相同的代码。虽然对于只有两个组件来说这不是一个大问题，但想象一下有 10 个组件 - 这会导致大量的代码重复。考虑到这种情况，找到一种根据身份验证状态处理条件内容显示的解决方案非常重要。
这就是高阶组件 (HOC) 发挥作用的地方。
解决方案：高阶组件 (HOC)
为了解决多处代码重复的问题，我们将身份验证逻辑隔离在一个名为 的 HOC 中withAuthentication：
export const withAuthentication = (Component) => {
const isConnected = false
if (!isConnected) {
return <p>You don't have access !</p>
}
return (props) => <Component {...props} />
}
接下来，我们将此 HOC 应用于需要访问限制的组件，如下所示：
export const TopBook = withAuthentication(() => {
return (
<div>
<p>Top Book</p>
</div>
)
})
export const UsersRating = withAuthentication(() => {
return (
<div>
<p>UsersRating</p>
</div>
)
})
假设您从 props 或 context 检索 isConnected ，您现在拥有独立且可重用的逻辑。
更进一步
我们可以通过 HOC 走得更远。现在让我们想象一下，我们想要使用配置文件视图进行一些布局工作：
export const Profile = () => {
// This is the beta version of the Profile
return (
<div>
<p>Beta Profile</p>
<h1>Nicolas BROUARD</h1>
</div>
)
}
我们有我们的个人资料视图，我们想要添加一个“Beta”横幅来表明这确实是个人资料的 Beta 版本。我们还可以使用 HOC：
export const withBetaBanner = (Component) => {
return (props) => (
<>
<header className="beta-header">This is a beta version</header>
<Component {...props} />
</>
)
}
如果需要，您可以轻松嵌套各种 HOC：
const ProtectedBetaProfile = withAuthentication(withBetaBanner(Profile))
return <ProtectedBetaProfile />;
这允许您隔离不同的规则，使单元测试更容易！如有必要，您还可以操纵道具。HOC 非常强大！
如有必要，您还可以操纵道具。HOC 非常强大！
结论
总之，您现在拥有在 React 项目中充分利用高阶组件 (HOC) 的功能所需的所有工具。
通过结合 prop 转发、HOC 组合等概念，并使用 TypeScript 实现类型安全，您可以创建更灵活、更干净、更高效的组件。HOC 提供了一种实用的方法来处理横切问题并简化组件，这可以极大地促进应用程序的维护和扩展。在您的项目中不断尝试 HOC，并毫不犹豫地探索具体示例来加深您的理解。
掌握 HOC 的艺术将为您在构建健壮且可扩展的 React 应用程序方面带来显着优势。因此，深入研究、应用这些知识，并将您的组件转变为灵活而强大的构建块，用于您未来的 React 创作。
