React 高阶组件

它也被称为 HOC。在 React 中，HOC 是一种用于重用组件逻辑的高级技术。它是一个接受组件并返回新组件的函数。根据官方网站的说法，它不是 React API 中的一个特性（部分），而是一种源于 React 组合性质的模式。它们类似于用于向现有组件添加附加功能的 JavaScript 函数。

一个高阶组件函数将另一个函数作为参数。 map 函数是理解这一点的最佳示例。 它的主要目标是将组件逻辑分解为更简单、更小的函数，您可以根据需要重用这些函数。

语法

我们知道组件将 props 转换为 UI，而高阶组件将一个组件转换为另一个组件，并允许向其中添加附加数据或功能。 Hocs 在 第三方 库中很常见。 HOC 的示例包括 Redux 的 connect 和 Relay 的 createFragmentContainer。

现在，我们可以从下面的例子中理解 HOC 的工作原理。

在上面的例子中，我们创建了两个函数 add() 和 higherOrder()。 现在，我们将 add() 函数作为 参数 提供给 higherOrder() 函数。 为了调用，在 higherOrder() 函数中将其重命名为 addReference，然后 调用它。

在这里，您正在传递的函数称为回调函数，您正在传递回调函数的函数称为 高阶 (HOCs) 函数。

示例

创建一个名为 HOC.js 的新文件。 在此文件中，我们制作了一个函数 HOC。 它接受一个 参数 作为组件。 在这里，该组件是 App。

HOC.js

现在，将 HOC.js 文件包含到 App.js 文件中。 在此文件中，我们需要 调用 HOC 函数。

App 组件被包装在另一个 React 组件中，以便我们可以修改它。 因此，它成为高阶组件的主要应用。

App.js

输出

当我们执行上述文件时，它将给出如下屏幕的输出。

高阶组件约定

• 不要在组件的 render 方法中使用 HOC。
• 静态方法必须被复制才能访问它们。 您可以使用 hoist-non-react-statics 包自动复制所有非 React 静态方法。
• HOC 不适用于 refs，因为“Refs”不会作为参数或参数传递。 如果您将 ref 添加到 HOC 组件中的元素，则 ref 引用最外层容器组件的实例，而不是包装的组件。