React.js 高阶组件

高阶组件或 HOC 是重用组件功能逻辑的高级方法。它只是获取原始组件并返回增强组件。

句法：

const EnhancedComponent = higherOrderComponent(OriginalComponent);

使用高阶组件的原因：

• 易于处理
• 摆脱在每个组件中复制相同的逻辑
• 使代码更具可读性

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序。

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

  cd foldername

项目结构：

示例 1：假设我们需要重用相同的逻辑，例如将名称传递给每个组件。

Name.js

import React from 'react'
  
const EnhancedComponent = (OriginalComponent) => {
    class NewComponent extends React.Component {
  
        // Logic here
  
        render() {
            // Pass the callable props to Original component
            return  
        }
    }
    // Returns the new component
    return NewComponent
}
  
export default EnhancedComponent;

应用程序.js

import React from "react";
import "./App.css"
import EnhancedComponent from './Name'
   
class App extends React.Component {
  render() {
    // Call the props from originalComponent
    return 
{this.props.name}
 
  }
}
   
// Passed the originalcomponent 
export default EnhancedComponent(App);

输出：在这里，我们将名称作为道具传递，并带有用于从不同组件中调用的值。

示例 2：在此示例中，让我们实现一些逻辑。让我们做一个计数器应用程序。在 HighOrder.js 中，我们通过handleclick和show props 来调用组件的功能。

项目结构：

HighOrder.js

import React from 'react'
  
const EnhancedComponent = (OriginalComponent) => {
    class NewComponent extends React.Component {
  
        constructor(props) {
            super(props);
            // Set initial count to be 0
            this.state = { count: 0 }; 
        }
  
        handleClick = () => {
            // Incrementing the count
            this.setState({ count: this.state.count + 1 }); 
        }
  
        render() {
  
            // passed a handleclick and count in the originalComponent
            // as a props for calling and adding the functionality
            return  
        }
    }
    // Returns the new component
    return NewComponent 
}
// Export main Component
export default EnhancedComponent 

应用程序.js

import React from 'react'
import "./App.css"
// importing HighOrder file
import EnhancedComponent from './HighOrder' 
  
class App extends React.Component {
  render() {
    // Destructuring the props
    const { show, handleclick } = this.props
  
    // Calling out the props
    return {show}
     
  }
}
  
  
export default EnhancedComponent(App);

输出：

参考： https://reactjs.org/docs/higher-order-components.html