Компоненты высшего порядка реализует принцип DRY

Компонент высшего порядка (Higher-Order Component, HOC) - это функция, которая принимает компонент в качестве аргумента и возвращает новый компонент с расширенным функционалом. HOC сам по себе не является компонентом, но он позволяет создавать компоненты с дополнительными функциями и свойствами.

HOC позволяют повторно использовать общую логику и функциональность между различными компонентами. Они могут использоваться для абстрагирования состояния, логики жизненного цикла и других аспектов компонента.

Пример HOC может выглядеть так:

function withData(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props)
      this.state = { data: [] }
    }
 
    componentDidMount() {
      fetchData().then((data) => {
        this.setState({ data })
      })
    }
 
    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

В этом примере, функция withData принимает компонент в качестве аргумента и возвращает новый компонент с добавленным свойством data, которое получается через fetchData() и передается в компонент через пропсы.

HOC могут быть использованы для различных задач, например, для логирования, аутентификации, кэширования данных, и т.д. Они позволяют создавать компоненты с дополнительным функционалом без необходимости дублирования кода.

Назад