反应高阶组件

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

高阶组件函数接受另一个函数作为参数。地图函数是了解这一点的最佳示例。其主要目的是将组件逻辑分解为更简单和更小的功能，可以根据需要重复使用。

句法

const NewComponent = higherOrderComponent(WrappedComponent);

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

现在，我们可以通过以下示例了解HOC的工作方式。

//Function Creation
function add (a, b) {
  return a + b
}
function higherOrder(a, addReference) {
  return addReference(a, 20)
}
//Function call
higherOrder(30, add) // 50

在上面的示例中，我们创建了两个函数add()和HigherOrder() 。现在，我们将add()函数为HigherOrder()函数的参数。为了进行调用，请在HigherOrder()函数中将其重命名为addReference ，然后调用它。

在这里，你正在传递函数被调用回调函数，并在您传递回调函数的函数称为高阶(肝卵圆细胞)函数。

例

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

HOC.js

import React, {Component} from 'react';

export default function Hoc(HocComponent){
    return class extends Component{
        render(){
            return (
                

                    
                

            );
        }
    } 
}

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

App = Hoc(App);

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

App.js

import React, { Component } from 'react';
import Hoc from './HOC';

class App extends Component {
  render() {
    return (
      

        
HOC Example
        JavaTpoint provides best CS tutorials.
      
    )
  }
}
App = Hoc(App);
export default App;

输出量

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

高阶组件约定

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