React 中的高阶组件（HOC）是什么？

说到 React 中的高级主题，你一定听说过 HOC（高阶组件）。虽然 HOC 学习起来并不复杂，但可以避免直接通过复杂的示例来学习。

我会尽力让它尽可能简单。

如果您更喜欢观看视频，请点击下面的链接。

现在首先我们看看 HOC 解决了什么类型的问题？

嗯，有时我们有两个不同的组件实现相同的逻辑，例如，

正如您在下面看到的，

现在，这两个组件都具有相同的逻辑，例如计数器。

现在我们来看看ReactJS.Org中提到的 HOC 的定义

高阶组件 (HOC) 是 React 中用于复用组件逻辑的一项高级技术。HOC 本身并非 React API 的一部分。它们是一种源于 React 组合性本质的模式。

现在，如上所述，我们可以在单个 HOC 中实现组件的逻辑，然后可以在所需的组件中使用它。

让我们看看这个 HOC 是如何从 React 的组合特性中产生的模式，而不是 React API 的一部分。

import React, { Component } from "react";

const HOC = (Component, data) => {

//You can do modification in data then pass it to the component

  return class extends React.Component {
    render() {
      return (
        <Component />
      );
    }
  };
};

export default HOC;

如你所见，这是 HOC 组件的模式之一，
它接受两个参数，一个是我们想要添加逻辑的组件，另一个参数是数据。
我们可以修改这些数据，然后将其传递给组件。
现在，这个 HOC 将返回一个 React 组件，该组件返回的是组件的增强版本。

让我们在点赞和评论组件中尝试一下。
它们都使用了与计数器相同的逻辑。

因此，创建名为 Hoc.js 的新文件并写入以下代码。

这里我们实现了计数器的逻辑。

第 3 行：我们可以传递组件和数据。

第 6 行：返回一个 React 组件。

第 7 行至第 19 行：这些行代表我们用来实现计数器的相同逻辑。

第 25 行：这里我们有计数器的通过状态。

第 26 行：这里我们传递了一个函数来增加计数器状态。

现在让我们看看如何使用这个 HOC。

下面是类似的组件。

第 8 行：显示喜欢的数量。

第 9 行：增加点赞的按钮。

第 15 行：这里我们使用了 HOC 组件。我们传入了点赞组件和 5 号。为什么是 5 号？因为假设已经有 5 个点赞，那么我们可以从 5 号开始实现计数器逻辑。

第 17 行：在这里我们将导出 HOC 返回的新的增强点赞组件。

现在简单来说，HOC 采用 LikesComopnent 和数据，然后通过在其中实现 Counter 逻辑返回增强的 LikesComopnent。

我们可以对 CommentComponent 做同样的事情，

第 15 行：这里我们发送了不同的数据。（10 而不是 5）

不要忘记在组件文件中调用已导出组件的增强版本。
就像这样：

import React from "react";
import "./App.css";
import EnhancedLikes from "./components/HOC/LikesCount";
import EnhancedComments from "./components/HOC/CommentsCount";

function App() {
  return (
    <div className="App">
      <EnhancedLikes />
      <EnhancedComments />
    </div>
  );
}

export default App;

实现这一点之后，您就会明白我们不必为更多组件编写相同的逻辑。

HOC 有很多用途，例如：

如果用户已经登录，并且您想要在多个组件中检查用户的登录状态或传递用户的数据，那么您可以将其传递给 HOC，然后将 HOC 组件包装在这些组件周围。

您可以从这里找到完整代码库。

感谢您的阅读和支持。😄

欢迎访问我的 YouTube 频道：

@CodeBucks

您可能还喜欢这些网站模板：

• ReactJS 中一个漂亮的作品集模板 =>这里
• ReactJS 中的 NFT 收集登陆页面 =>这里

在 Twitter 上关注我，我会在那里分享很多有用的资源！

@code.bucks 😉