Как использовать React и React-Sentinel для создания отзывчивых, тупых компонентов

kak ispolzovat react i react sentinel dlya sozdaniya otzyvchivyh tupyh komponentov?v=1656633854

автор Райан Юрканин

0*-M7kIz-f-VmOfAy6
Иногда вам просто нужен друг, чтобы стоять на страже! Фотография Альдо Де Ла Паса на Unsplash

tldr; Медиа-запросов не всегда достаточно. Запросы элементов удивительны, и вы можете поместить их в черную рамку с помощью комбинации реперов визуализации и чего-то наблюдающего за вашим элементом!

Работа с медиа-запросами

Если вам приходилось воспроизводить адаптивный дизайн, то вы знаете, насколько великолепны – но неприятны – медиа-запросы.

Медиа-запросы позволяют CSS, который применяется только в том случае, если размер меняется в области просмотра.

К сожалению, если вы хотите создать многоразовый и адаптивный компонент карты, медиа-запросы не идеальны:

  1. Вам нужно определить соотношение между высотой и шириной адаптивной карты и высотой и шириной окна просмотра.
  2. Если карта имеет более сложный макет (например, гибкий макет), вам нужно определить, как размер окна изменит гибкий макет, а затем как это повлияет на карту. ?
  3. Может быть JavaScript, который переключает условие, программно изменяющее размер карты, и вам также придется учесть это и сообщить это в таблице стилей.
1*vIDJ7ghnI_MUu0kfVUD9DA
…и теперь мы в аду CSS calc(). ?

В этот момент я начал сомневаться, почему я вообще начал развиваться

Все, что я хотел, это способ стилизации карты на основе высоты и ширины этого элемента. Многие хотят иметь способность это делать. Одним из предложений является запрос элементов, и есть несколько способов разместить их в CSS прямо сейчас! ?

Однако, если вы похожи на меня, вы хотите перенести это не только в экосистему JavaScript, но и в экосистему React. Можем ли мы создать интеллектуальный контейнер с реагирующим черным ящиком и тупой визуальный компонент?

Да мы можем.

Решение

Прелесть этого компонента в том, что он не знает, почему имеет такой размер. Это зависит от того, кто его использует, а значит, этот компонент можно повторно использовать в нескольких макетах. Наша цель состоит в том, чтобы держать это дав то же время делая его отличным.

Давайте посмотрим, как мы можем это сделать, привлекая react-sentinel, и создавая с его помощью умный адаптивный контейнер! ?

Так что есть на самом деле здесь происходит?

react-sentinel работает, принимая функцию, observe реквизит и вызов его неоднократно в исполнителе requestAnimationFrame или requestIdleCallback петля.

requestAnimationFrame зацикливается со скоростью, определяемой браузером. Если кто-то просматривает веб-страницы на старом телефоне, то зацикливание будет реже. Это дает браузеру более точный контроль и обеспечивает более плавную работу!

Если вы хотите узнать больше о requestAnimationFrame предлагаю прочитать Получите сверхспособности движения с помощью requestAnimationFrame Бенджамин Де Кок! ?

Sentinel принимает возвращаемое значение из этих функций и, если оно отличается от предыдущего возвращаемого значения, устанавливает его как Sentinel локальное состояние компонента Если это не другое, тогда мы останавливаемся здесь же и не обновляем, чтобы не повторять постоянно! ?

Использование Render Props

Теперь в этот момент вы можете спросить, что такое хорошая настройка Sentinel местный штат? Как мы собираемся получить это? ?

Мой лучший способ сделать это – использовать Render Props.

Большинство знают, что вы можете передать дочерние элементы компонента и получить к ним доступ с помощью this.props.childrenно вы можете также передать функцию!

<MightHaveSecrets>  {() => <WantsSecrets />}</MightHaveSecrets>

Ладно, это дело. Почему кто хочет это сделать? ?

Потому что сейчас, имеет секреты может передавать свои внутренние секреты в качестве аргумента этой функции! Он не имеет представления о том, как вы действительно собираетесь использовать эти секреты, что делает его чрезвычайно инкапсулированным.

<MightHaveSecrets>  {secret => <WantsSecrets emoji={ secret ? ? : ? } />}</MightHaveSecrets>  

Все <Sentinel /> компонент заботится о бесконечном опросе, который ищет обновление. Render Props позволяет любой части пользовательского интерфейса интерпретировать эти обновления так, как они считают нужным. Кроме того, гораздо очевиднее, откуда берутся эти ценности. ?

Если вы хотите узнать больше о Render Props, предлагаю просмотреть документацию React или прочитать эту статью человека, первым обратившего меня к ним!

Теперь у нас есть разумный компонент, который превращает размер элемента в простые свойства, которые <DumbCard />может переварить. Рефакториты и менять значение очень легко, и вам не нужно беспокоиться о том, в каком макете оно живет, или о том, что происходит вне его сферы действия.

Подведению

Представьте, как трудно было бы написать CSS для карты, размер которой пользователь мог бы изменить. Теперь мы реагируем на все изменяющее размер элементов.

Крутая вещь о react-sentinel состоит в том, что он не просто решает проблему запросов элементов. Я также использовал его для создания компонента Smart Animation, поскольку он использует requestAnimationframe под капотом?

Вот где вы можете проверить код react-sentinelа также некоторые альтернативные решения!

Если у вас есть какие-либо вопросы или любые темы, которые вы хотели бы охватить более подробно, не стесняйтесь связаться со мной! Спасибо за чтение и счастливую кодировку! ?

Добавить комментарий

Ваш адрес email не будет опубликован.