Как повторно использовать вашу логику и сохранить ваш код СУХИМ
Что такое HOC?
Компонент более высокого порядка (HOC) - это продвинутая технология в React для повторного использования логики компонентов. По сути, HOC не являются частью React API. Это шаблон, который вытекает из композиционной природы React. - Реагировать на документы
Хорошо, возможно, это может быть сложно понять, но в документации React есть более простое определение:
Конкретно, компонент более высокого порядка - это функция, которая принимает компонент и возвращает новый компонент. - React docs
Теперь я думаю, что это более простой способ понять HOC. Но как это поможет вам повторно использовать ваш код? А как написать свой первый HOC?
Код без HOC
Предположим, ваше приложение React будет отображать таблицу пользователей. Для этого вы вызываете API и ждете, пока он вернет данные, одновременно показывая загрузчик и визуализируя возвращенные данные. Код может выглядеть примерно так:
Теперь у вас есть еще один компонент, который отображает таблицу команд. Вся логика такая же, как и в предыдущем компоненте:
Вы видите, что код почти такой же? Вот где HOC может помочь вам сделать ваш код более СУХИМ и удалить эту повторяющуюся логику при рендеринге ваших компонентов.
Код с HOC
Сначала вы создаете свой HOC следующим образом:
Цель этого HOC - получить Component, в данном случае Table компонент, плюс некоторые другие свойства для определения логики его рендеринга.
Теперь давайте используем его в ваших Users и Teams компонентах:
Вот и все! Вы инкапсулировали состояние загрузки и пустых данных в один файл, который можно повторно использовать в любой части вашего приложения. Когда вы оборачиваете компонент своим HOC, вы улучшаете этот компонент с помощью логики внутри HOC.
Используйте больше HOC!
Этот шаблон можно применять несколько раз к одному и тому же компоненту.
Хотите добавить нумерацию страниц? Просто создайте новый компонент HOC, например. withPagination:
А затем просто используйте его в своем компоненте следующим образом:
Вопросов
Почему вы устанавливаете отображаемое имя HOC таким образом?
WithLoader.displayName = `WithLoader(${Component.displayName || Component.name || 'Component' })`
Это соглашение, которое React docs рекомендует использовать для облегчения отладки.
Почему вы объявляете расширенный компонент с HOC вне основного компонента?
Объявление внутри будет воссоздавать расширенный компонент при каждом рендеринге.
Почему вы передаете только {...props} компоненту, который возвращается HOC?
Таким образом, вам не нужно беспокоиться о том, какие реквизиты нужны вашему компоненту, вы просто передаете их все, кроме тех, которые необходимы для рендеринга загрузчика, пустого состояния или разбивки на страницы.
