Question

如果我有一个HOC，需要使用一些上下文并根据该上下文传递帮助程序功能，那是不是滥用了HOC？本质上，这与利用帮助程序类是同一回事。

例如：

import helpers from './helpers'

function withHelpers(WrappedComponent, context) {
  return class extends React.Component {
    render() {
      let contextualHelpers = {...// bind all helpers to context}

      return (
        <WrappedComponent {...this.props} {...contextualHelpers} />
      )
    }
  }
}

在这种情况下，我最好还是有一个帮助器类，因为我没有使用任何生命周期方法，状态等。HOC提供了什么？然后，不用在消费组件中调用withHelpers，而是在构造函数this.helper = new Helper(context)中用上下文实例化帮助程序。

换句话说，这是否滥用了HOC概念？

Answer 1

不，您不是在滥用HOC概念，但是在这种情况下，HOC究竟能为您提供什么帮助？您是否希望在许多组件中都包含这些帮助器？如果是这样，您只需按照您提到的方式实例化帮助程序即可。

请记住，HOC使您的组件的可读性降低，因为您必须阅读所有组件才能找出实例化了这些帮助程序的位置（在这种情况下，其他开发人员将必须阅读所有文件才能接触到这些文件。最后一行，请参见export default withHelpers(FooComponent, context)！

因此，最好在constructor甚至componentDidMount中实例化帮助程序。

Answer 2

这可能是一个反模式，因为Helper与组件实例无关。此外，如果Helper在render内实例化时不需要在每个渲染器上实例化，则HOC可能会导致不必要的开销。

在这种情况下，HOC的唯一好处是它通过通过props注入依赖项来实现依赖项注入模式。如果包装的组件不能从依赖项注入中受益（改进的可重用性和可测试性），则可以将HOC视为反模式。

React HOC与Helper类？

2 个答案: