Автор оригинала: FreeCodeCamp Community Member.
Soumyajit Pathak.
В этой статье мы создадим простой многоразовый реагирующий компонент, который отслеживает «состояние видимости страницы».
При создании веб-приложения вы можете столкнуться с ситуациями, где вам нужно отслеживать текущее состояние видимости приложения. Возможно, вам может потребоваться воспроизведение/приостановить эффект видео или анимации, дросселью некоторую производительность интенсивную работу или просто отслеживать поведение пользователя для аналитики на основе того, активна ли вкладки браузера или нет.
Теперь эта функция кажется довольно простыми для реализации, пока вы на самом деле не попробуйте реализовать его в первый раз. Оказывается отслеживание, активно взаимодействует ли пользователь с веб-приложением или не может быть довольно сложно.
Есть API видимости страницы, которая работает нормально для большинства случаев, но не обрабатывает все возможные случаи бездействия вкладки браузера. Page Visual API который отправляет видимостьКэнже Мероприятие, чтобы позволить слушателям знать, что видимое состояние страницы изменилось или имеет некоторые неровности. Он не загоняет событие в некоторых случаях, даже если окно или заинтересованная вкладка браузера вне поля зрения или вне фокуса.
Чтобы обрабатывать некоторые из этих краевых случаев, нам нужно использовать комбинацию Фокус и размытие слушатели событий на обоих Документ и окно элемент. Вы можете найти подробное обсуждение об этом здесь Отказ
Мы осуществим логику Wearabound, описанную в руководстве, упомянутой выше в небольшом приложении React. Не волнуйтесь, вы можете прочитать его позже – мы объясним каждый аспект логики, который мы будем использовать.
CodeSandbox CodeSandbox – это онлайн-редактор, адаптированный для веб-приложений. CodeSandox.io.
Если вы хотите погрузиться в код или посмотреть демонстрацию, он доступен на CodeSandbox а также Github Отказ
Начиная
Мы будем использовать CodeSandbox для загрузки нашего приложения React Application (вы можете использовать Create-React-App также). Мы создадим небольшое приложение, которое будет иметь видеоэлемент HTML5, который будет воспроизводиться только тогда, когда вкладка браузера находится в фокусе или активно, иначе она будет приостановлена автоматически. Мы используем видео, потому что это сделает тестирование функциональности нашего приложения.
Давайте начнем с создания простейшей части I.E. Видео компонент. Это будет простой компонент, который получит логические реквизиты, названные Активный и строковые реквизиты по имени SRC Это будет держать URL для видео. Если Активный Реквис правда, то мы будем играть в видео. В противном случае мы сделаем это.
Мы создадим простой компонент Ract Class. Мы сделаем простой видеоэлемент со своим источником, установленным на URL-адрес, прошедший с использованием SRC реквизит, и мы будем использовать React’s New Ref API, чтобы прикрепить Ref на видео NOM NOD. Мы установим видео в AutoPlay, предполагая, что когда начнем приложение, страница будет активна.
Одно следует отметить, что здесь Safari теперь не позволяет автоматически воспроизводить элементы медиа-элементов без взаимодействия пользователя. ComponentDidupdate Метод жизненного цикла очень удобно в обращении с побочными эффектами, когда реквизит компонента меняется. Поэтому здесь мы будем использовать этот метод жизненного цикла для воспроизведения и приостановки видео на основе текущего значения Это.props.active Отказ
Префикс поставщика браузера Префиксные отличия очень раздражают, чтобы иметь дело с использованием определенных API, и API видимости страницы, безусловно, является одним из них. Следовательно, мы создадим простую полезную функцию, которая будет обрабатывать эти различия и возвращать нам совместимые API на основе браузера пользователя в однородной основе. Мы создадим и экспортируем эту небольшую функцию из PageVisiluyUtils.js под SRC каталог.
В этой функции мы будем использовать простую форму управления на основе операторов, на основании файла, чтобы вернуть API, специфичный браузер. Вы можете увидеть, что мы прикрепили MS префикс для Internet Explorer и webkit Префикс для браузеров WebKit. Мы храним правильные API в скрытый и видимостьКэнже Струнные переменные и возврат их из функции в виде простого объекта. Наконец, мы экспортируем функцию.
Далее мы переходим на наш основной компонент. Мы будем инкапсулировать все нашу логику отслеживания видимости нашей страницы в компоненте React React Class, используя Рендер реквизиты шаблон. Мы создадим классный компонент под названием ВидимостьМаджер Отказ Этот компонент будет обрабатывать добавление и удаление всех слушателей событий на основе DOM.
Мы начнем, импортируя функцию утилиты, которую мы создали ранее, и вызываете ее, чтобы получить правильный браузер API. Затем мы создадим компонент React и инициализируем его состояние с одним полем невидим установить правда Отказ Это логическое государственное поле будет нести ответственность за отражение нашего состояния видимости страницы.
В компоненте ComponentDidmount Метод жизненного цикла, мы приложим слушатель события на документе для видимостьКэнже событие с Это. HandleVisibilityChange метод как его обработчик. Мы также будем прикреплять слушатели событий для событий фокуса и размытия на документе, а также в окне элемент. На этот раз мы установим Это .FOFOFISITYTRUE и Это .fforcevisibilityFalse в качестве обработчиков для фокуса и размытия событий соответственно.
Далее мы создадим HandsisibilityChange Метод, который примет один аргумент Forcedflag Отказ Это Forceflag Аргумент будет использоваться для определения того, называется методом из-за видимостьКэнже событие или фокус или размытие событий. Это так, потому что ForceVisibilityTrue и ForceVisibilityFalse Методы ничего не делают, кроме как называют HandsisibilityChange Способ с истинным и ложным значением для Forcedflag аргумент
Внутри HandsisibilityChange Метод, мы сначала проверяем ли Forcedflag Значение аргументов – это логическое значение (это потому, что если он вызывается из VisibleChangeChange Обработчик событий, чем аргумент, прошедший, будет |
Если это логический, то мы проверяем, правда ли это или ложно. Когда это правда, мы назвали Seavisitive Способ с истиной в противном случае мы называем метод с ложным в качестве аргумента. Seavisitive метод использует this.setState Способ обновления невидим Значение поля в состоянии компонента.
Но, если Forcedflag Не булево, то мы проверяем значение скрытого атрибута на документе и вызовите Seavisitive метод соответственно. Это охватывает нашу страницу видимости состояния отслеживания логики.
Чтобы сделать компонент многоразовый в природе, мы используем рисунок рендеринга. То есть вместо того, чтобы рендеринг компонента из оказывать Метод, мы вызываем Это.props.children как функция с this.state.isvisible Отказ
Наконец, мы устанавливаем наше приложение React в DOM в нашем index.js файл. Мы импортируем наши две компоненты реагирования ВидимостьМаджер и Видео и создать небольшой функциональный реагирующий компонент Приложение составляя их. Мы передаем функцию как дети ВидимостьМаджер Компонент, который принимает невидим как аргумент и передает его на Видео Компонент в своем возврате. Мы также передаем видео URL AS SRC реквизит к Видео компонент. Вот как мы потребляем рендеринг на основе VisiblityManager компонент. Наконец, мы используем Reactom.runder Метод для визуализации нашего приложения RACT на узле DOM с идентификатором «root».
Вывод
Современный браузер API на самом деле становится действительно мощным и может использоваться для удивительных вещей. Большинство из этих API являются обязательными в природе и могут быть сложными работать с иногда в декларативной парадигме реагирования. Использование мощных шаблонов, таких как рендеринг рендер, чтобы обернуть эти API в свои собственные многоразовые реагирования, могут быть очень полезны.
Первоначально опубликовано able.bio .