React HOC 与 Helper 类？

Question

如果我有一个 HOC 需要一些上下文并根据该上下文传递辅助函数，这是对 HOC 的滥用吗？从本质上讲，它与使用助手 class.

是一回事

例如：

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} />
      )
    }
  }
}

在这种情况下，我是否最好只使用一个助手 class，因为我没有使用任何生命周期方法、状态等。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 类？

React HOCs vs Helper Classes?

javascript

frontend

web-frontend

reactjs

higher-order-components