javascript - React - 高阶组件应该写成一个函数吗？

Question

我正在学习 React。在我看来，HOC 就像下面这个来自 React 官方的例子 docs :

function withSubscription(WrappedComponent, selectData) {
    // ...and returns another component...
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.state = {
                data: selectData(DataSource, props)
            };
        }

        componentDidMount() {
            // ... that takes care of the subscription...
            DataSource.addChangeListener(this.handleChange);
        }

        componentWillUnmount() {
            DataSource.removeChangeListener(this.handleChange);
        }

        handleChange() {
            this.setState({
                data: selectData(DataSource, this.props)
            });
        }

        render() {
            // ... and renders the wrapped component with the fresh data!
            // Notice that we pass through any additional props
            return <WrappedComponent data={this.state.data} {...this.props} />;
        }
    };
}

可以这样改写:

class WithSubscription extends React.Component {
    constructor({ component, selectData, ...props }) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            data: selectData(DataSource, props)
        };
    }

    componentDidMount() {
        DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
        DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
        this.setState({
            data: selectData(DataSource, this.props)
        });
    }

    render() {
        return <component data={this.state.data} {...this.props} />;
    }
}

然后像这样使用它:

<WithSubscription component={BlogPost} selectData={(DataSource) => DataSource.getComments()} />

它们都是 HOC 吗？什么时候一种风格比另一种更受欢迎？

Answer 1

一开始我也在为 HOC 苦苦挣扎。另一种看待这个问题的方法是查看组件的包装器，您可以使用它来将功能与一个组件隔离开来。

比如我有多个HOC。我有许多仅由 props 定义的组件，它们一旦创建就不可更改。

然后我有一个 Loader HOC 组件，它处理所有网络连接，然后将 props 传递给任何正在包装的组件(这将是您传递给 HOC 的组件)。

加载器并不真正关心它正在渲染哪个组件，它只需要获取数据，并将其传递给包装的组件。

在您的示例中，您实际上可以完成相同的操作，但是一旦您需要链接多个 HOC，它就会变得更加复杂。

例如我有这个 HOC 链:

PermissionsHOC -> LoaderHOC -> BorderLayoutHOC -> 组件

第一个可以检查您的权限，第二个可以加载数据，第三个可以提供通用布局，第四个是实际组件。

如果您意识到某些组件会受益于在父级上具有通用逻辑，那么检测 HOC 会容易得多。您可以在示例中执行相同的操作，但是每次添加子组件时都需要修改 HOC，以添加该子组件的逻辑。不是很有效。这样，您可以轻松添加新组件。我确实有一个每个组件都扩展的 Base 组件，但我用它来处理辅助功能，例如分析、记录器、处理错误等。