Экспорт компонента React с несколькими оболочками HOC?

Question

У меня есть компонент React, который отображает стилизованный текст, и я хочу, чтобы он загружал сетевой ресурс, прослушивал ввод WebSocket и отображал уведомления. Чтобы сделать это, я пишу функции-оболочки компонентов высшего порядка для каждой из них: withResource, withSocket, а также withNotifications,

При экспорте компонента это правильно?

class TextComponent extends React.Component {
  ...
}

export default withResource(withSocket(withNotifications(TextComponent)))

Answer 1

Ты можешь использовать compose из редукса или перекомпоновки. Например:

Redux

import { compose } from 'redux'

export default compose(
  withResource,
  withSocket,
  withNotifications
)(TextComponent)

пересоставить

import { compose } from 'recompose'

export default compose(
  withResource,
  withSocket,
  withNotifications
)(TextComponent)

Answer 2

Это называется функциональной композицией и имеет математическую основу (что вызывает именование переменных y и x и обратное выполнение функций). Это снижает сложность вызова написанных функций за счет исключения дополнительных определений переменных и глубокого переноса функций.

Напишите его самостоятельно или используйте из библиотеки, например: lodash, rambda, redux, так далее.

const compose = (...rest) => x => rest.reduceRight((y, f) => f(y), x)

Использование с функциями первого класса:

const increment = (numb) => numb + 1
const multiplyBy = (multiplyNum) => (num) => multiplyNum * num

compose(increment, multiplyBy(3), increment)(4)// 4 > 5 > 15 > 16

Использование с компонентами более высокого порядка:

compose(withRouter, withItems, withRefs)(Component) 

Answer 3

Еще одно простое решение - сделать это в три этапа, просто поместив компоненты HOC друг на друга следующим образом:

      const firstHOC = withNotifications(TextComponent);
const secondHOC = withSocket(firstHOC);
export default withResource(secondHOC);