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

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

Таким образом, в основном HOC включают идею правила «не повторяйся» (DRY), и это одно из самых важных правил в разработке программного обеспечения. HOC - это продвинутая техника повторного использования логики в компонентах React.

HOC основаны на функциях высшего порядка, ключевой концепции JavaScript. Давайте сначала взглянем на функции высшего порядка, и тогда будет легче понять, что такое компоненты высшего порядка.

Функции высшего порядка

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

const higherFunction = function(){ 
    return function(argument){
      // Some Function Logic
      return finalResult;
  }
}

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

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

Это функция форматирования валюты, которая форматирует целое число как валюту в зависимости от символа валюты и десятичного разделителя. Эта функция будет называться currencyFormatter.

const currencyFormatter = function(symbol, separator){
       return function(val){
         const wholeValue = Math.trunc(val/100);
         let fraction = val%100;
         if(fraction < 10){
             fraction = '0' + fraction;        
          }
         
         return `${symbol}${wholeValue}${separator}${fraction}`
   }
}

currecncyFormatter возвращает функцию с currencySymbol и разделителем, а затем мы передаем значение модулю форматирования и форматируем это значение, извлекая его целую и дробную части. Окончательный ответ - это объединение символа, целой части, разделителя и дробной части соответственно.

Функция будет выполняться как

> response = currencyFormatter('$', '.');
> response(1999);
"$19.99" // formatted value
> response(2478);
"$24.78" // formatted value

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

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

.forEach (): выполняет итерацию по всему массиву, но не модифицирует и не изменяет массив и возвращает undefined.

.map (): этот метод преобразует массив, применяя функцию ко всем его элементам, а затем строит другой массив, используя возвращенные значения.

.reduce (): этот метод выполняет заданную функцию для каждого элемента массива.

.filter (): этот метод выполняет предоставленный метод обратного вызова и создает новый массив для всех элементов, которые проходят проверку, реализованную предоставленной функцией.

Итак, теперь мы изучили основы функций высшего порядка, теперь мы увидим, что такое компоненты высшего порядка.

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

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

Базовая структура компонентов более высокого порядка:

HOC структурированы как функции высшего порядка,

Это компонент;

Он принимает компоненты в качестве аргументов;

Он возвращает новый компонент;

Компонент, который он возвращает, может отображать переданный ему исходный компонент.

import React from 'react';
const higherOrderComponent = (Component) => {
  class HOC extends React.Component{
      render(){
             return <Component />;
        }
    } 
    return HOC;
}

HOC используются для разработки компонентов с определенным общим поведением, что делает их подключенными иначе, чем обычный шаблон state-to-props.

Примечание.

HOC не изменяют и не видоизменяют Компонент, он создает новый.

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

Вот некоторые из реальных случаев использования, с которыми вы могли случайно столкнуться:

реагировать-redux (подключить (mapStateToProps, mapDispatchToProps) (UserPage))

реагировать-маршрутизатор (withRouter (UserPage))

Остались вопросы о компонентах высшего порядка? Спрашивайте в комментариях ниже! Не забудьте посетить мой канал на Youtube, чтобы найти решения проблем с Leetcode. Ссылка указана ниже. 👇🏻👇🏻👇🏻👇🏻👇🏻

Youtube: https://www.youtube.com/channel/UCD_Al-U9pUeQOXDkhYc_otg

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

Функции высшего порядка

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

Вопросы по теме