Как отслеживать видимость страницы в React с помощью рендеринга

1656545652 kak otslezhivat vidimost straniczy v react s pomoshhyu renderinga

от Сумьяджита Патака

1*WsI4NrSVmdM-xjYDPa-Wgw
Фото Саймона Абрамса на Unsplash

В этой статье мы создадим простой компонент React для повторного использования, отслеживающий «Состояние видимости страницы».

При создании веб-приложения вы можете столкнуться с ситуациями, когда вам нужно отслеживать текущее состояние видимости приложения. Возможно, вам потребуется воспроизвести/приостановить эффект видео или анимации, уменьшить интенсивную работу или просто отследить поведение пользователя для аналитики на основе того, активна ли вкладка браузера или нет.

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

Существует API видимости страницы, хорошо работающей в большинстве случаев, но не обрабатывающей все возможные случаи неактивности вкладки браузера. The API видимости страницы что посылает a visibilitychange событие, чтобы сообщить слушателям, что видимое состояние страницы изменилось или имеет некоторые нарушения. Он не запускает событие в некоторых случаях, даже если окно или соответствующая вкладка браузера не видны или не в фокусе.

Чтобы обработать некоторые из этих крайних случаев, нам нужно использовать комбинацию focus и blur слушатели событий на обоих document и window элемент. Вы можете найти подробную дискуссию об этом.

Мы реализуем логику обходного пути, описанную в руководстве, упомянутом выше, в небольшом приложении React. Не волнуйтесь, вы сможете прочесть это позже – мы объясним каждый аспект логики, которую мы будем использовать.

CodeSandbox
CodeSandbox – это онлайн-редактор, разработанный для веб-приложений.codesandbox.io

Если вы хотите погрузиться в код или просмотреть демонстрацию, она доступна на Codesandbox так хорошо как Github.

Начинаем

1*SZoc6eC41JBxJSQ_xODPrA
Видео приостанавливается, когда оно находится в фоновом режиме

Мы будем использовать Codesandbox для загрузки нашего приложения React (вы можете использовать create-react-app так же). Мы создаем небольшое приложение, которое будет иметь элемент видео HTML5, который будет воспроизводиться только тогда, когда вкладка браузера находится в фокусе или активна, иначе он будет автоматически приостановлен. Мы используем видео, поскольку оно облегчит тестирование функциональности нашей программы.

Давайте начнем с создания простейшей части, то есть Video компонент. Это будет простой компонент, который получит логический реквизит с именем active и реквизит String с ним src который будет содержать URL видео. Если active props это правда, тогда мы воспроизведем видео. Иначе мы остановим его.

Мы создадим обычный компонент класса React. Мы отразим простой видеоэлемент, источник которого будет установлен на URL-адрес, переданный с помощью src props, и мы будем использовать новый React ref API для добавления a ref на узле DOM видео. Мы настроим видео на автоматическое воспроизведение, предполагая, что при запуске программы страница будет активна.

Здесь следует обратить внимание на то, что Safari теперь не позволяет автоматически воспроизводить медиа-элементы без взаимодействия с пользователем. The componentDidUpdate Метод жизненного цикла очень удобен для обработки побочных эффектов при изменении параметров компонента. Поэтому здесь мы будем использовать этот метод жизненного цикла для воспроизведения и приостановки видео на основе текущего значения this.props.active.

Разница между префиксами поставщиков обозревателя очень раздражает, когда вы используете определенные API, и API видимости страницы, безусловно, является одним из них. Поэтому мы создадим простую вспомогательную функцию, которая справится с этими отличиями и вернет нам совместимый API на основе браузера пользователя унифицированным способом. Мы создадим и экспортируем эту небольшую функцию pageVisibilityUtils.js под src каталог.

В этой функции мы будем использовать простой поток управления на основе операторов if-else, чтобы восстановить специфический для браузера API. Вы можете видеть, что мы прикрепили PC префикс для Internet Explorer и webkit префикс для браузеров Webkit Мы будем сохранять правильный API hidden и visibilityChange строчные переменные и возвращать их из функции в виде простого объекта. Наконец мы экспортируем функцию.

Далее переходим к нашему основному компоненту. Мы инкапсулируем всю нашу логику отслеживания видимости страницы в компонент класса React для повторного использования, используя Реквизит визуализации узор. Мы создадим компонент класса под названием VisibilityManager. Этот компонент будет обрабатывать добавление и удаление всех обработчиков событий на основе DOM.

Мы начнем с импорта вспомогательной функции, которую мы создали ранее, и вызов ее, чтобы получить правильные API для браузера. Затем мы создадим компонент React и инициализируем его состояние одним полем isVisible установлен в true. Это поле логического состояния будет отвечать за отображение состояния видимости нашей страницы.

В компоненте componentDidMount жизненного цикла, мы добавим обработчик событий к документу для visibilitychange событие с this.handleVisibilityChange метод как его обработчик. Мы также подключим прослушиватели событий для событий фокусировки и размытия на документе, а также на элементе окна. На этот раз установим this.forceVisibilityTrue и this.forceVisibilityFalse как обработчики событий фокусировки и размытия соответственно.

Далее мы создадим handleVisibilityChange метод, принимающий один аргумент forcedFlag. Это forceFlag Аргумент будет использоваться, чтобы определить, вызван ли метод через visibilitychange события или события фокусировки или размытия. Это так потому, что forceVisibilityTrue и forceVisibilityFalse методы ничего не делают, кроме вызова handleVisibilityChange метод со значениями true и false для forcedFlag аргумент.

Внутри handleVisibilityChange метод, сначала проверяем, forcedFlag значение аргумента является буллевым (это потому, что если оно вызывается из visibilitychange обработчик события, чем передается аргумент a SyntheticEvent объект).

Если это логическое значение, мы проверяем, является ли оно истинным или ложным. Когда это правда, мы позвонили по телефону setVisibility метод из true, иначе мы вызываем метод из false как аргумент. The setVisibility рычаги метода this.setState метод обновления isVisible значение поля в состоянии компонента

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

Чтобы сделать компонент повторно использованным в природе, мы используем шаблон Render Props. То есть вместо визуализации компонента из render метод, мы вызываем this.props.children как функция с this.state.isVisible.

Наконец, мы монтируем наше приложение React к DOM в нашем index.js файл. Мы импортируем два наших компонента React VisibilityManager и Video и создать небольшой функциональный компонент React App путем их составления. Мы передаем функцию как дочерние элементы VisibilityManager компонент, принимающий isVisible как аргумент и передает его в Video компонент в его операторе возврата. Мы также передаем URL-адрес видео как src реквизит к Video компонент. Вот как мы используем Render Props на основе VisiblityManager компонент. Наконец, используем ReactDOM.render метод воспроизведения программы React на узле DOM с идентификатором «root».

Вывод

Современные API интерфейсы браузера становятся действительно мощными, и их можно использовать, чтобы делать удивительные вещи. Большинство из этих API обязательны по своей природе, и иногда с ними может быть трудно работать в декларативной парадигме React. Использование мощных шаблонов, таких как Render Props, для обёртывания этих API в собственные многоразовые компоненты React может быть очень полезным.

Первоначально опубликовано на сайте could.bio.

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

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