TL; DR - Вы можете визуализировать определенные компоненты области просмотра в React с однострочным текстом
React великолепен, и весь мир единодушно с этим согласен. Когда мы рассматриваем все как компоненты, разработка становится намного быстрее и проще. Поскольку все работает на JavaScript, React отображает только необходимый код в зависимости от состояния приложения. Неважно, если у вас более тысячи компонентов и десятки тысяч строк кода. Если вы лениво загружаете свои компоненты, вы загружаете только то, что необходимо пользователю, и я думаю, что это самая большая выгода от использования React.
При этом задумывались ли вы, что происходит, когда вы пишете медиа-запросы в своей кодовой базе React?
Вы визуализируете элементы, которые не должны находиться в определенном окне просмотра, и скрываете их с помощью CSS.
В этом примере
import React from 'react'; import './Example.style.scss';
const Example = () => { return ( <div className="example"> <div className="mobile-only">I'm a fancy mobile div</div> <div className="desktop-only">I'm a heavy desktop div</div> </div> ); };
Example.style.scss
файл
.example {
.mobile-only {
@media (min-width: 768px){
display: none;
}
}
.desktop-only {
@media (max-width: 767px){
display: none;
}
}
}
Когда Example
компонент отображается, оба .mobile-only
и .desktop-only
элементы будут отображаться в DOM, но .mobile-only
div будет скрыт в больших окнах просмотра, а .desktop-only
div будет скрыт в меньших окнах просмотра с помощью css. display: none
.
Ничего страшного, если он маленький. Но в одном из проектов, над которыми я работал, у нас было тяжелое меню рабочего стола и тяжелое мобильное меню, которые отображались во всех окнах просмотра. Только один Menu
должен иметь размер около 20Kb
, и мы легко могли загружать нежелательные 20Kb
в браузер для каждого пользователя. Если у вас больше элементов, специфичных для области просмотра, этот размер будет продолжать увеличиваться.
React Socks - это минимальная библиотека React для рендеринга компонентов на основе области просмотра.
Попрощайтесь с медиа-запросами. Вот как можно визуализировать компоненты, специфичные для области просмотра, с помощью классного синтаксиса.
const Example = () => {
return(
<Breakpoint small down>
<MyAwesomeMobileMenu>
This component will render only in mobile devices
</MyAwesomeMobileMenu>
</Breakpoint>
);
};
const Example = () => {
return(
<div>
<Breakpoint small down>
<div>I will render only in mobile devices</div>
</Breakpoint>
<Breakpoint medium only>
<div>I will render only in tablets (iPad, etc...)</div>
</Breakpoint>
<Breakpoint large up>
<div>I will render in laptops, desktops and everything bigger</div>
</Breakpoint>
</div>
);
};
И дело не только в этом. Вы можете указать свои собственные точки останова (сколько угодно, вау!) и использовать их в соответствии с потребностями вашего проекта. Кроме того, вам нужно будет setDefaultBreakpoints
только один раз в вашем проекте 😎
import { setDefaultBreakpoints } from 'react-socks';
setDefaultBreakpoints([
{ xs: 0 },
{ s: 376 },
{ m: 426 },
{ l: 769 },
{ xl: 1025 }
]);
Это мои любимые точки останова
setDefaultBreakpoints([
{ cats: 0 },
{ dinosaurs: 900 }
]);
<Breakpoint cats only>
Only cats can render me 🐈
</Breakpoint>
Причины, по которым вам стоит использовать React Socks
- Без проблем обрабатывайте компоненты, относящиеся к области просмотра
- Вы можете определить свои собственные точки останова (например, xs, ipad, bigmonitors) и использовать их
- Вы можете повысить производительность своего приложения, если лениво загружаете компоненты, относящиеся к области просмотра.
- Более простой и понятный синтаксис для удобства использования.
Библиотека опубликована в npm и находится в альфа-версии. Я хотел бы получить ваши отзывы и улучшить его перед выпуском первой стабильной версии.
Изменить: первая стабильная версия была выпущена 9 декабря 2018 г. с улучшенной производительностью и поддержкой SSR. 🎉
Если вам интересно, почему такое название React Socks 🤷♂️
React Socks удобно обертывает ваши компоненты, чтобы предотвратить ненужный рендеринг в различных окнах просмотра, точно так же, как вы оборачиваете ноги носками, чтобы ноги не замерзли 🎉
Давайте наденем какие-нибудь причудливые React Socks и обернем все компоненты 🔥
Ты великолепен! Хорошего дня! ⚡️
Первоначально опубликовано на dev.to.