Высококачественные компоненты ReactJS

Высокий уровень компонента — это функция JavaScript, используемая для добавления дополнительных функций к существующим компонентам. Эти функции — чистые функции, что означает, что они получают данные и возвращает значения на основе этих данных. Если данные изменяются, высокоуровневая функция будет выполняться снова с использованием новых данных ввода. Если мы хотим обновить возвращаемый компонент, нам не нужно изменять 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.

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