От автора: компоненты высшего порядка React — это функции JavaScript, используемые для добавления дополнительных функциональных возможностей к существующему компоненту. Эти функции являются чистыми, что означает, что они получают данные и возвращают значения в соответствии с этими данными.
Если данные изменяются, функции более высокого порядка перезапускаются с различными вводимыми данными. Если мы хотим обновить возвращаемый компонент, нам не нужно менять компоненты более высокого порядка. Все, что нам нужно сделать, это изменить данные, которые использует наша функция.
Компонент более высокого порядка (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.
Примечание. Компоненты более высокого порядка могут использоваться для различных функций. Эти чистые функции являются сутью функционального программирования. Как только вы привыкнете к этому, вы заметите, как ваше приложение становится легче поддерживать и обновлять.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.
