📜  React高阶组件

📅  最后修改于: 2020-12-19 08:45:26             🧑  作者: Mango

反应高阶组件

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

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

句法

const NewComponent = higherOrderComponent(WrappedComponent);

我们知道组件将props转换为UI,而高阶组件将一个组件转换为另一个组件,并允许向其中添加其他数据或功能。临时文件在第三方库中很常见。 HOC的示例是Redux的connectRelay的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引用最外层容器组件的实例,而不是包装的组件。