Реагировать на HOCs против вспомогательных классов?

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

Возможно, это антипаттерн, потому что Helper и экземпляр компонента не связаны. Кроме того, HOC может привести к ненужным накладным расходам, если не требуется создавать экземпляр Helper при каждом рендеринге, в то время как он создается внутри render.

В этом случае единственным преимуществом HOC является то, что он реализует шаблон внедрения зависимостей путем внедрения зависимостей через реквизиты. Если обернутый компонент не может извлечь выгоду из внедрения зависимости (улучшенное повторное использование и тестируемость), HOC можно считать антипаттерном.

Answer 2

Нет, вы не злоупотребляете концепцией HOC, но чем именно HOC поможет вам в этом случае? Хотите ли вы иметь этих помощников во множестве компонентов? Если это так, вы можете просто создать экземпляры помощников, как вы упомянули.

Имейте в виду, что HOC делают ваши компоненты менее читаемыми, так как вам нужно будет прочитать все компоненты, чтобы узнать, где создаются эти помощники (в этом случае другие разработчики должны будут прочитать весь файл, чтобы обратиться к ним). последняя строка и увидеть export default withHelpers(FooComponent, context)!

Так что вам лучше создавать экземпляры помощников в вашем constructor или даже componentDidMount.