Компоненты React более высокого порядка на самом деле очень просты

JavaScript React.js

предисловие

Компоненты высокого порядка Компоненты высокого порядка, не API React, а использование методов React или шаблонов проектирования. Следовательно, также можно реализовать компоненты высокого порядка, но освоить компоненты высокого порядка, повысить гибкость и повторное использование кода и добиться большей элегантности. Конечно, изучите расширенное использование React, вы также можете получить более глубокое понимание.

Компоненты более высокого порядка на самом деле не так сложны, как вы думаете.

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

Компонент более высокого порядка — это функция, которая принимает компонент и возвращает новый компонент.

const EnhancedComponent = highOrderComponent(WrappedComponent);

Следует помнить, что хотя имякомпоненты более высокого порядка, но компоненты более высокого порядка не являются компонентами, афункция!

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

Можно сказать, что компоненты преобразуют свойства в пользовательский интерфейс, а компоненты более высокого порядка преобразуют один компонент в другой.

Вот простой компонент более высокого порядка:

import React, { Component } from 'react';

export default (WrappedComponent) => {
  return class EnhancedComponent extends Component {
    // do something
    render() {
      return <WrappedComponent />;
    }
  }
}

Как видно из приведенного выше кода, мы можемWrappedComponentДелайте то, что хотите (например, манипулируйте реквизитами, извлекайте состояние, оборачивайте другие элементы вокруг исходного компонента и т. д.), таким образомобработкаиз компонентов, которые вы хотитеEnhancedComponent.把通用的逻辑放在高阶组件中，对组件实现一致的处理，从而实现代码的复用。

Используйте компоненты более высокого порядка

Сценарий применения компонентов более высокого порядка — использование в формах.

в реакцииУправляемые компоненты, черезstateЧтобы контролировать поведение пользователя при вводе, нам нужно отслеживатьonChangeобновитьstate,Например:

import React, { Component } from 'react';

class Input extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
    }
  }
  
  handleChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }
  
  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

export default Input;

Обычно нам также необходимо проверить элементы формы, в этом случае нам может понадобитьсяhandleChangeДобавьте логику проверки в . Если это элемент формы, написать его таким образом не составит труда, но когда элементов формы становится все больше и больше или добавляется логика один за другим, что это за опыт? Если товар снова нужно менять, то работать сверхурочно можно только со слезами на глазах!

В это время может быть отражена роль компонентов более высокого порядка. Просто поместите логику, общую для всех элементов формы в HOC. поставить поле ввода нужноvalueа такжеonChangeИзвлеките компоненты более высокого порядка, а затем передайтеpropsПерейти к исходному компоненту:

import React, { Component } from 'react';

export default (WrappedComponent) => {
  return class InputHOC extends Component {
    constructor(props) {
      super(props);
      this.state = {
        value: '',
      }
    }

    handleChange = (e) => {
      this.setState({
        value: e.target.value,
      });
    }

    render() {
      const passProps = {
        value: this.state.value,
        onChange: this.handleChange,
      }
      return <WrappedComponent {...passProps} />;
    }
  }
}

Тогда нет необходимости реализовывать в форме элементstateа такжеonChangeлогика, нужно только обрабатывать входящиеprops, и позвонитекомпоненты более высокого порядка, мы получаем именно те свойства и функции, которые нам нужныновые компоненты:

import React, { Component } from 'react';
import InputHOC from './InputHOC';

import './style.css';

class Input extends Component {
  render() {
    return (
      <input className="input" type="text" {...this.props} />
    )
  }
}

export default InputHOC(Input);

Затем вы просто берете новый компонент и используете его. Если есть другие элементы формы, вам нужно только вызывать компоненты более высокого порядка, чтобы получить нужные вам компоненты. Это использование простого компонента высокого порядка для повторного использования кода.

Как видно из приведенного выше примера, в компоненте более высокого порядка можно оперироватьprops,stateи даже изменитьrenderОтображаемое содержимое в методе.

Схема и поток данных компонентов более высокого порядка фактически показаны на рисунке:

некоторые примечания

параметр

Поскольку расширенный компонент является функцией, функция также может иметь несколько параметров, например:

export default (WrappedComponent, data) => {
  return class EnhancedComponent extends Component {
    // do something with data
    render() {
      return <WrappedComponent />;
    }
  }
}

имя

Имя компонента-контейнера, созданного компонентом более высокого порядка, выглядит так же, как и обычный компонент в инструментах разработчика React, и неясно, используется ли компонент более высокого порядка.

Чтобы облегчить отладку, общее соглашение состоит в том, чтобы обернуть исходный компонент именем класса компонента-контейнера, чтобы назвать компонент-контейнер:

import React, { Component } from 'react';

const getDisplayName = (WrappedComponent) => {
  return WrappedComponent.displayName ||
    WrappedComponent.name ||
    'Component'
}

export default (WrappedComponent, validate) => {
  return class InputHOC extends Component {
    static displayName = `InputHOC(${getDisplayName(WrappedComponent)})`;
    constructor(props) {
      super(props);
      this.state = {
        value: '',
      }
    }

    handleChange = (e) => {
      console.log(e);
      this.setState({
        value: e.target.value,
      });
    }

    render() {
      const passProps = {
        value: this.state.value,
        onChange: this.handleChange,
      }
      return <WrappedComponent {...passProps} />;
    }
  }
}

Результаты следующие, так что можно интуитивно увидеть, что используются компоненты более высокого порядка:

Многослойные компоненты высшего порядка

Несколько компонентов высокого порядка могут быть применены к одному компоненту для формирования нескольких слоев:

Input = InputHOC(Input);
Input = InputHHOC(Input);

Суммировать

Компоненты более высокого порядка относятся к продвинутому приложению React, но на самом деле это очень простая концепция, но очень практичная. В реальных бизнес-сценариях гибкое и разумное использование компонентов высокого порядка может повысить гибкость и возможность повторного использования кода.

Для компонентов более высокого порядка мы можем суммировать следующие пункты:

  • Компонент более высокого порядка — это функция, а не компонент
  • Компоненты преобразуют свойства в пользовательский интерфейс, а компоненты более высокого порядка преобразуют один компонент в другой.
  • Роль компонентов более высокого порядка заключается в повторном использовании кода.
  • Режим декоратора в режиме проектирования компонентов высокого порядка
Категории