Что такое HOC или компонент более высокого порядка?
Компонент более высокого порядка - это функция, которая принимает компонент в качестве параметра и возвращает новый компонент.
Зачем нам нужен компонент высшего порядка?
Перед тем как начать, мы должны сосредоточиться на базовой концепции React. React - это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. React всегда работает на основе компонентов. Компонент является одним из основных строительных блоков React.
И у React есть одна из самых ценных функций - возможность повторного использования кода. Функция многократного использования компонентов упрощает нашу жизнь, когда мы разрабатываем интерфейсный интерфейс.
Мы можем уменьшить дублирование кода, используя концепцию компонентов. Например, в вашем приложении для домашней страницы всегда нужны панель навигации и нижний колонтитул. И для этой панели навигации и нижнего колонтитула также нужна другая страница. Если вам нужно реализовать тот же дизайн или функциональность в другом компоненте, просто вызовите панель навигации, нижний колонтитул или любой компонент. И просто импортируйте компонент в верхней части вашего нового компонента. Это небольшая основная концепция проектирования с помощью React.
Та же концепция работает, когда мы работаем над функциональностью приложения. Предположим, в вашем приложении есть функция увеличения значения. Что вам нужно в нескольких компонентах. На самом деле это дублирование кода, потому что вы пишете один и тот же код в нескольких компонентах. В этой ситуации, если мы создадим компонент, содержащий весь общий код, мы сможем повторно использовать этот компонент. Та же концепция работает для компонентов более высокого порядка. Компоненты высшего порядка, используемые для уменьшения дублирования кода.
Концепция компонентов высшего порядка, таких как человек-паук! Питер Паркер становится Человеком-пауком, когда носит его костюм.
const spiderman = withCostume (Питер Паркер);
Как использовать компонент высшего порядка?
У нас двухкомпонентный. Функциональность первого компонента - увеличение значения нажатием. А второй - приращение значения при каждом наведении.
Двухкомпонентные имеют одинаковую функциональность. Здесь нужно писать один и тот же код в нескольких местах. И теперь мы можем предотвратить дублирование кода с помощью компонента более высокого порядка.
Во-первых, все тот же код, написанный в компоненте.
После этого мы просто вызываем компонент withCounter и передаем другой компонент в качестве параметра withCounter.
Это компонент более высокого порядка….
Вывод:
Все знания и информация делятся как учащийся. Пожалуйста, исправьте, если что-то не так.
Спасибо.
