Архитектурная ошибка модальных окон в React
Один из примеров того, как не нужно делать в React. Есть некий компонент в котором через меню открывается одно из модальных окон: function Comp() { return ( <> <Menu /* выбор какое окно открыть */ /> <ModalA isOpen={modal === 'a'} /> <ModalB isOpen={modal === 'b'} /> <ModalC isOpen={modal === 'c'} /> </> ); } Каждое из этих модальных окон это форма которой необходимы некоторые данные с сервера. React выполняет все эти компоненты, и как следствие, загружает все необходимые им данные разом. Получаем лишнюю нагрузку на браузер клиента и на сервер. Дополнительной проблемой является то, что при закрытии такой формы, её состояние не сбрасывается, т...
309 читали · 1 год назад
Как создать ReactJS Modal Component
Всем Привет! В этой статье разберем как создать простой компонент модального окна в React JS с нуля. Если задать в поиске фразу - модальное окно для React JS, то можно найти огромное количество готовых библиотек. Так сказать - подключай и используй. Но, чтобы понять, как именно это работает, нужно хотя бы один раз написать компонент модального окна самостоятельно. В нашем случае это будет SimpleModal Component, но Вы можете назвать его по своему. Если формат изложения материала в виде текста Вам не подходит, то можете посмотреть видео или скачайте готовый проект с github...