ReactJS - Компоненты высшего порядка

Компоненты более высокого порядка - это функции JavaScript, используемые для добавления дополнительных функций к существующему компоненту. Эти функцииpure, что означает, что они получают данные и возвращают значения в соответствии с этими данными. Если данные изменяются, функции более высокого порядка повторно запускаются с другим вводом данных. Если мы хотим обновить возвращаемый компонент, нам не нужно менять HOC. Все, что нам нужно сделать, это изменить данные, которые использует наша функция.

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

Давайте посмотрим на простой пример, чтобы легко понять, как работает эта концепция. ВMyHOC это функция более высокого порядка, которая используется только для передачи данных в MyComponent. Эта функция принимаетMyComponent, усиливает его newData и возвращает расширенный компонент, который будет отображаться на экране.

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

Если мы запустим приложение, мы увидим, что данные передаются в MyComponent.

Note- Компоненты более высокого порядка могут использоваться для различных функций. Эти чистые функции составляют сущность функционального программирования. Как только вы к этому привыкнете, вы заметите, как ваше приложение становится проще поддерживать или обновлять.