Question

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

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

例如：

const EnhancedComponent = higherOrderComponent(WrappedComponent);

但是下面的例子呢？在以下示例中，砌体组件也是HOC吗？

<Masonry>
    {childElements}
</Masonry>

那呢？ ErrorBoundary 是HOC吗？

<ErrorBoundary>
    <MyComponent />
</ErrorBoundary>

Answer 1

如果您能考虑一下从函数（HOC）和JSX生成的类型，这会很有帮助。

使用JSX时，您要调用React.createElement，它会提供一个新的React Element。

此React元素是作为Masonry传递给您的ErrorBoundary或children的东西。

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

另一方面，您的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不是高阶函数。它既不接受函数作为参数，也不返回函数作为结果。

这些都是高阶成分吗？

1 个答案: