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.