React高阶组件用法 – ReactJS实战教程

上一章ReactJS实战教程请查看：React使用表格结构化数据

高阶组件也被称为HOC，在React中，HOC是一种重用组件逻辑的高级技术，它是一个获取组件并返回新组件的函数。据官方网站介绍，这并不是React API的功能(部分)，而是一种从React的组合特性中产生的模式，它们类似于用于向现有组件添加附加功能的JavaScript函数。

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

语法

const NewComponent = higherOrderComponent(WrappedComponent);  

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

现在，我们可以通过下面的示例了解hoc的工作原理。

//函数创建  
function add (a, b) {  
  return a + b  
}  
function higherOrder(a, addReference) {  
  return addReference(a, 20)  
}  
//方式调用 
higherOrder(30, add) // 50  

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

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

例子

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

HOC.js

import React, {Component} from 'react';  
  
export default function Hoc(HocComponent){  
    return class extends Component{  
        render(){  
            return (  
                <div>  
                    <HocComponent></HocComponent>  
                </div>  
  
            );  
        }  
    }   
}  

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

App = Hoc(App);  

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

App.js

import React, { Component } from 'react';  
import Hoc from './HOC';  
  
class App extends Component {  
  render() {  
    return (  
      <div>  
        <h2>HOC例子</h2>  
        srcmini - 开发教程网.  
      </div>  
    )  
  }  
}  
App = Hoc(App);  
export default App;  

高阶组件约定

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