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

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

Компонент высшего порядка (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 .

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