混淆如何在React中使用HOC

Question

我正在学习React，遇到了一个叫做高阶组件的东西，还找到了这段代码：

+----------+------------------+--------------+-----------+-------------+------------+
| Employee |  Booking Type    |     Jobs     | WorkLoad% | Start Date  |  End date  |
+----------+------------------+--------------+-----------+-------------+------------+
| John     | Chargeable       | CNS          |        20 | 04/02/2020  | 31/03/2020 |
| John     | Chargeable       | CNS          |        20 | 04/03/2020  | 27/04/2020 |
| Bernard  | Vacation/Holiday | SN           |       100 | 30/04/2020  | 11/05/2020 |
| Bernard  | Vacation/Holiday | Annual leave |       100 | 23/01/2020  | 24/02/2020 |
| Bernard  | Chargeable       | Tech PLC     |        50 | 29/02/2020  | 30/03/2020 |
|          |                  |              |           | 23/01/2020  | 23/01/2020 |
|          |                  |              |           | 24/01/2020  | 24/01/2020 |
|          |                  |              |           | 25/01/2020  | 25/01/2020 |
|          |                  |              |           | 26/01/2020  | 26/01/2020 |
|          |                  |              |           | 27/01/2020  | 27/01/2020 |
|          |                  |              |           | 28/01/2020  | 28/01/2020 |
|          |                  |              |           | 29/01/2020  | 29/01/2020 |
|          |                  |              |           | 30/01/2020  | 30/01/2020 |
|          |                  |              |           | 31/01/2020  | 31/01/2020 |
|          |                  |              |           | ...         | ...        |
|          |                  |              |           | 11/05/2020  | 11/05/2020 |
+----------+------------------+--------------+-----------+-------------+------------+

好吧，基本上，很清楚它是如何执行HOC接受组件的，并返回该接受组件的增强版本。但是令我困惑的是，由于我们不调用render方法，所以该如何返回组件，也就是说，我们只需要使用Subscription（someComponent）来执行此操作，并且将返回增强的someComponent，但是我们不调用实际上返回该方法的render方法增强组件。这怎么可能？

Answer 1

您实际上是在将HOC与React混淆。

该名称具有误导性。

HOC并非functional programming.的概念。这个概念源自function greaterThan(n) { return m => m > n; } let greaterThan10 = greaterThan(10); console.log(greaterThan10(11)); // → true

的世界

在函数式编程中，我们有高阶函数（HOF）
HOF是将另一个函数作为参数的函数。

请考虑以下示例：

greaterThan

.map是高阶函数，它接受一个函数作为参数。 JS中的.filter，component太HOF。它们以功能为参数。

我们有HOC。

HOC的正式定义

高阶组件是一个函数，它接受一个组件并 返回一个新组件。

您注意到了吗？
它不是component。这是一个 功能 ，它以component作为参数。它还返回const hocWrapper = (PassedComponent) => ({ children, ...props }) => <PassedComponent {...props}> {children.split("").reverse().join("")} </PassedComponent> const name = (props) => <span>{props.children}</span> const reversedName = hocWrapper(name) <reversedName>Hello</reversedName> 。

请考虑以下示例：

match_parent

在上面的示例中，我们有

1. HOC-hocWrapper
2. PassedComponent-反应组件
3. 返回值-[具有增强功能的React组件]

hocWrapper是 简单函数 ，它使用 PassedComponent 作为参数并返回 PassedComponent的增强版本 。