Освоение компонентов высшего порядка в React: руководство с примерами

Apr 29 2023

Компоненты высшего порядка (HOC) — это мощный и популярный шаблон в React, который позволяет повторно использовать логику в компонентах. HOC — это функции, которые принимают компонент и возвращают новый компонент с дополнительными функциями.

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

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

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

Зачем использовать компоненты высшего порядка?

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

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

Создать HOC легко. Вы просто создаете функцию, которая принимает компонент в качестве аргумента и возвращает новый компонент с дополнительными функциями. Давайте рассмотрим пример:

import React from "react";

const withLoading = (WrappedComponent) => {
  class WithLoading extends React.Component {
    state = {
      isLoading: true
    };

    componentDidMount() {
      setTimeout(() => {
        this.setState({ isLoading: false });
      }, 2000);
    }

    render() {
      const { isLoading } = this.state;

      if (isLoading) {
        return <div>Loading...</div>;
      }

      return <WrappedComponent {...this.props} />;
    }
  }

  return WithLoading;
};

export default withLoading;

Чтобы использовать HOC, мы просто обертываем компонент, который хотим улучшить, функцией withLoading:

import withLogging from "./LoadingWraper";

const App = () => {
  return (
    <div className="App">
      <div>Hello, World!</div>
    </div>
  );
};
export default withLogging(App);

Заключение:

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

Ссылка на CodeSandBox : -https://codesandbox.io/s/vigorous-rhodes-mgc8z4

Свяжитесь со мной в социальной сети

✅ Гитхаб:https://github.com/surksharathi
✅ Линкедин:https://www.linkedin.com/in/suraksha-singh-88350472/
✅ Твиттер:https://twitter.com/SurakshaSogaria