这些都是高阶组件吗？答案

【问题标题】：Are these all Higher Order Components?这些都是高阶组件吗？
【发布时间】：2019-03-17 11:15:14
【问题描述】：

HOC 或高阶组件的定义如下：

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

一个例子是这样的：

const EnhancedComponent = higherOrderComponent(WrappedComponent);

但是下面的例子呢？在以下示例中，Masonry 组件是否也是 HOC？

<Masonry>
    {childElements}
</Masonry>

那么这个呢？ ErrorBoundary 是 HOC 吗？

<ErrorBoundary>
    <MyComponent />
</ErrorBoundary>

【问题讨论】：

第二个不是 HOC。它只是一个渲染 children 属性的组件。
不同之处在于 HOC 采用一个组件，而您的第二个示例是包装一个 React 元素（即 React.createElement 的结果）。你定义中描述的 HOC 必须有一个组件。
谢谢你们的回答。我刚刚扩展了我的问题（对此感到抱歉）。第三个例子呢？

标签： reactjs

【解决方案1】：

如果您可以考虑从函数（HOC）和 JSX 生成的类型，这会有所帮助。

当您使用 JSX 时，您调用的是 React.createElement，它提供了一个新的 React 元素。

这个 React 元素是作为 children 传递给您的 Masonry 或 ErrorBoundary 的内容。

因为类型是 React 元素，它不符合我们定义的 HOC 必须接收 Component 而不是 Element。

另一方面，您的 higherOrderComponent 函数确实采用 WrappedComponent 组件，并返回一个新组件。

函数

另一种思考方式是使用简单的函数。如果我有一个以函数为参数的函数，我可以说我的函数是一个高阶函数。

例子：

const filter = predicate => arr => arr.filter(predicate);
const lessThan10 = filter(x => x < 10);
const set1 = lessThan10([2, 4, 6, 8, 10]); // [2, 4, 6, 8]
const set2 = lessThan10([5, 10, 15, 20]);  // [5]

这里我们可以说filter是一个高阶函数，因为它接受一个函数作为它的参数并且它也返回一个函数作为它的结果（一个函数等待一个数组）。

我们还可以看到lessThan10 不是高阶函数。它既不接受函数作为参数，也不返回函数作为结果。

【讨论】：

最后一个问题。您说过：另一方面，您的 HigherOrderComponent 函数确实采用 WrappedComponent 组件，并返回一个新组件。在这个例子中，higherOrderComponent 是一个 HOC 函数，它返回一个名为 EnhancedComponent 的 HOC 组件吗？增强组件是高阶组件吗？
术语“高阶组件”是指特定类型的高阶函数。也就是说，HOC 是一个接受 Component 并返回 Component 的函数。返回的组件不是高阶的（它不接受或返回任何组件）。我们的EnhancedComponent 和其他组件一样只是一个组件。
该术语令人困惑，因为高阶组件实际上根本不是组件，而是获取和返回组件的函数。
现在我明白了。非常感谢你们。我爱你们。