Я всегда считаю декларативную природу React одновременно и благословением, и болью. Когда вам нужно заботиться о том, как все должно выглядеть, у вас меньше времени, чтобы сосредоточиться на том, что важно: на том, что нужно делать.
Отображение / скрытие модального окна - одна из тех вещей, которые стали механическими для любого разработчика React, но могут извлечь большую пользу из другого подхода, который позволяет избежать распространения состояний и методов повсюду. Пришло время очистить наш код React.
Пример с React Vanilla 🍦
Вот очень простой пример, в котором мы открываем / закрываем случайное модальное окно:
Глядя на компонент App, мы видим, как все эти методы show / hide / handle занимают много места в нашем компоненте App, просто чтобы показать модальное окно!
Кроме того, мы всегда должны отслеживать видимость модального окна и сохранять его в состоянии. Что, если вам нужно 5 модальных окон на этом экране? В более крупном приложении вы бы хотели, чтобы ваши состояния были чистыми и были ориентированы на функциональную логику. Помните, что этим компонентам верхнего уровня, скорее всего, уже многое предстоит обработать.
Давайте посмотрим, как мы можем исправить этот беспорядок, используя волшебную библиотеку Recompose и создав компонент более высокого порядка, который будет обрабатывать все эти состояния и методы за нас.
Очистка с помощью Recompose ✨
Recompose - это библиотека, которая существенно улучшает компоненты, добавляя состояние, методы или свойства с помощью функций. Хотя наше приложение по-прежнему будет выполнять эти объявления и изменения состояния, объявлять их не нужно, поскольку наши функции будут делать это за нас за кулисами.
Начнем с npm install recompose --save
Теперь нам нужно сделать то же самое, что и в Vanilla, но объявить это внутри нашего компонента более высокого порядка. Для этого мы используем метод withState(), который инкапсулирует для нас состояние, метод, который влияет на это состояние, и начальное значение.
Уже сейчас видно, что вся наша работа сделана. Нам больше не нужно объявлять this.state = { isVisible: false } внутри нашего компонента. Нам также не нужны эти методы отображения / скрытия. Это означает, что мы можем превратить наше приложение в компонент без сохранения состояния!
Теперь мы можем просто получить доступ к нашему недавно созданному переключателю и состояниям более высокого порядка из реквизита и аккуратно обработать нашу логику:
Мы устранили необходимость объявлять наше состояние и методы, которые загрязняли наш компонент, что оставляет нам красивый и намного более чистый код.
Бонус: прикрепите функцию высшего порядка к модальному файлу
Если вы объявляете свой модальный компонент в его собственном Modal.jsx файле, вы можете переместить с ним метод withModal и очистить его еще больше.
Теперь у вас остался функциональный код, который можно использовать повторно, который выглядит хорошо. Довольно круто, правда? 🤙
