React HOC содержит некоторые очень мощные вещи внутри, которые вы не можете легко реализовать с помощью хуков и компонентов.
Мы собираемся увидеть, как React Higher Order Components может позволить вам создавать более качественные приложения без необходимости возлагать всю ответственность на компоненты.
Когда вы должны предпочесть HOC крючкам?
Вот несколько сценариев выбора HOC, которые отлично подходят вместо использования хуков:
- Используйте одно и то же поведение для нескольких компонентов без дублирования кода.
- Разделение компонентов с такими вещами, как бизнес-логика.
- Добавление сложных поведений, общих для нескольких компонентов, без написания сложного кода.
Всегда предпочитайте хуки, когда логика или данные самодостаточны внутри компонента. Если логика или данные используются совместно, HOC — отличный вариант для рассмотрения.
История плохо спроектированного компонента
Каждый компонент React состоит из компонента. По мере роста приложения добавляются новые изменения и функции. Предположим, вы создали страницу, которая выполняет несколько функций:
- Обработка аутентификации пользователя.
- Ведение журнала.
- Отрисовка макета страницы.
Здесь важно помнить, что вы никогда не должны добавлять несколько обязанностей к одному и тому же компоненту. Чем больше компонент знает о других вещах, тем сложнее его поддерживать в будущем.
Предположим, что компонент выглядит следующим образом:
HOC спешит на помощь!
Одна из самых мощных функций, которые может предложить HOC, называется композицией. Техника заключается в том, что вы создаете HOC, которые отвечают за одну вещь и не зависят ни от каких других HOC. Затем вы используете композицию для создания одного HOC, который работает как конвейер HOC, объединяющий всю свою мощь.
Это волшебная функция этой техники композиции:
const compose = (...fns) => (...args) => fns.reduceRight((res, fn) => [fn.call(null, ...res)], args)[0];Это очень простая функция. Он просто берет несколько функций и выполняет их справа налево. Параметр, который вы передаете составной функции, передается самой правой функции. Другие функции получают данные, возвращаемые функцией справа от них, в качестве параметра.
Ниже приведен пример HOC, который создает сложную логику, объединяющую несколько небольших независимых HOC:
Давайте приготовим карри HOC!
Каррирование — это концепция функционального программирования. Это просто функция, которая принимает по одному аргументу за раз и возвращает серию функций, где каждая функция принимает другие аргументы.
Простой пример каррированной функции:
const add = x => y => x + y;
const increment = add(1);
const addTen = add(10);
increment(2); // 3
addTen(2); // 12Та же концепция может быть применена к HOC.
Всегда помните об этом при использовании HOC
HOC — очень мощная функция React, и при разумном использовании они позволят вам создавать отличные приложения React. Всегда помните об этих правилах:
- Логика или поведение, которые обеспечивает HOC, не должны быть привязаны к конкретному компоненту. Это должно быть разделяемое поведение.
- Он не должен создавать несколько новых реквизитов для компонентов. Он должен создавать максимум один новый реквизит, если это очень необходимо.
- Никогда не делайте компоненты зависимыми от HOC. Они должны быть полностью независимыми.
- Никакие два HOC не должны быть связаны друг с другом. Вы должны иметь возможность использовать несколько HOC в любом порядке.
Читайте этот и другие посты в моем Социальном блоге Typeshare
Станьте компонуемым: создавайте приложения быстрее, как Lego
Bit – это инструмент с открытым исходным кодом для модульного и совместного создания приложений. Перейдите на компоновку, чтобы поставлять быстрее, более последовательно и легко масштабировать.
Создавайте приложения, страницы, пользовательский опыт и пользовательские интерфейсы как автономные компоненты. Используйте их, чтобы быстрее создавать новые приложения и возможности. Используйте любой фреймворк и инструмент в своем рабочем процессе. Делитесь, повторно используйте и сотрудничайте, чтобы строить вместе.
Помогите своей команде:
→ Совместное использование кода и повторное использование
→ Монорепо
