【React】高阶函数运用（附代码）

在 React 中，使用高阶组件（Higher-Order Component, HOC）是一种常见的设计模式，用于增强组件的功能。那么在实际中我们会在何时用到呢？我们设计组件的目标是为了极大的解决业务使用问题，使用便利性和可扩展性则是我们设计组件的最大目标！

比如一个简单的场景，需要我们开发一个对话框，该对话框是复用性很高的组件，我们可以在这个组件中去定义对话框提交表单，关闭显示的逻辑。

dialogHOC 可能是一个用来处理对话框（Dialog/Modal）相关逻辑的高阶组件。以下是如何使用 dialogHOC 的基本示例。

1. 创建一个 HOC

首先，我们可以假设 dialogHOC 是一个用于增强组件的高阶组件，它可能会提供打开和关闭对话框的功能。

下面是一个简单的 HOC 示例：

// dialogHOC.js
import React, { useState } from 'react';

const dialogHOC = (WrappedComponent) => {
    return (props) => {
        const [isOpen, setIsOpen] = useState(false);

        const openDialog = () => setIsOpen(true);
        const closeDialog = () => setIsOpen(false);

        return (
            <>
                <WrappedComponent {...props} openDialog={openDialog} />
                {isOpen && (
                    <div className="dialog">
                        <h2>Dialog Title</h2>
                        <p>Some content here...</p>
                        <button onClick={closeDialog}>Close</button>
                    </div>
                )}
            </>
        );
    };
};

export default dialogHOC;

2. 使用 HOC 装饰组件

然后，你可以使用这个 HOC 来增强一个组件，比如一个按钮：

// MyButton.js
import React from 'react';
import dialogHOC from 'components/dialogHoc';

const MyButton = ({ openDialog }) => {
    return <button onClick={openDialog}>Open Dialog</button>;
};

export default dialogHOC(MyButton);

3. 渲染这个组件

最后，渲染这个被增强的组件：

import React from 'react';
import ReactDOM from 'react-dom';
import MyButton from './MyButton';

const App = () => {
    return (
        <div>
            <h1>My App</h1>
            <MyButton />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

上面的实现只是一个简单的案例，在工作中可能需求更加明确和具体，可以根据需要添加自己的属性方法去实现具体功能。

我们看到上面的代码在用高阶函数时，以函数为参数，实际上，在日常开发中我们经常用到装饰器去简化代码，具体使用为

import React from 'react';
import dialogHOC from 'components/dialogHoc';

@dialogHOC
class MyComponent extends React.Component {
    render() {
        return (
            <button onClick={this.props.openDialog}>Open Dialog</button>
        );
    }
}

export default MyComponent;