Как да създадете обикновен реакционен компонент, който проследява "състояние на видимост на страницата"

Когато създавате уеб приложение, можете да срещнете ситуации, когато трябва да проследявате текущото състояние на видимост. Случва се, че трябва да възпроизведете или прекратите ефекта от анимацията или видеото, да намалите интензивността или да следите поведението на потребителя за анализи. На пръв поглед тази функция изглежда доста проста за продажба, но не е така. Проследяване на потребителската дейност - доста сложен процес.

Има видимост на страниците API, който работи чудесно в повечето случаи, но не се справя с всички възможни невидимост на раздела на браузъра. Видимостта на страниците API изпраща събитие висящи дръжки, така че слушателите да знаят, че състоянието на видимостта на страницата се е променило. Той не стартира събитие в някои случаи, ако прозорецът или съответният раздел на браузъра е скрит от погледа. За да се справяме с някои от тези случаи, трябва да използваме комбинация от събития във фокуса и размазването в двата документа и прозореца.

Така че, от тази статия ще научите как да създадете обикновен реакционен компонент, който проследява състоянието на видимост на страницата.

Стъпка

За да създадете REACT приложение, тук ще се използва Codesandbox (Можете също да използвате приложението Create-React-App). Ние ще създадем малко приложение, в което видеоклипът HTML5 ще се възпроизвежда само ако разделът на браузъра е във фокус или активен, в противен случай ще бъде спряно автоматично. Видеото се използва за улесняване на тестването на функциите на приложението.

един. Започнете със създаването на най-простата част, т.е. компонентното видео. Това ще бъде прост компонент с булевите активни и низови SRC параметри, съдържащи URL адреса за видео. Ако активните реквизитори са верни, ще се играе видео. В противен случай ще бъде спряно.

Изображение, озаглавено от DisplayVisiredutilsjswsrcdirectory

2. Създайте прост реакционен клас и елементен видео с неговия източник на код хостинг URL, който се предава с SRC. Ето един нов Ref API за прикачване на връзки към видео-възел видео. Вие ще конфигурирате видео на AVTO Replay, ако приемем, че когато започнем приложението, страницата ще бъде активна.

Safari не играе автоматично мултимедийни елементи без взаимодействие с потребителя. Начинът на сравнение е много удобен при обработката на ефектите, когато промените в компонента. Следователно този метод ще се използва тук за възпроизвеждане и спиране на видео въз основа на текущата стойност на това.Професионалисти.Активен.

3. Създайте функционална програма. Разликите в префиксите на браузъра не винаги са удобни за използване на определени API и един от тях. Ние ще създадем проста полезна функция, която ще се справи с тези различия и ще върне един API въз основа на браузъра на потребителя. Създаване и експортиране на тази функция от СтраницатаПритуити.JS в директорията на SRC.

В тази функция ще използваме изявлението на IF-иначе, за да върнете интерфейса на API, специфичен за браузъра. Може да се види, че добавяме префикса на MS за Internet Explorer и префикса на Webkit за Webkit Browsers. Ние ще съхраняваме желания API в скрити и висящи променливи и ще ги върнем от функция като прост обект. И накрая, ние изнасяме функцията.

4. Придвижете се до главния компонент. Ние капсулираме логиката за проследяване на цялата страница в класа на реакцията, използвайки шаблона за реконструкции. Създайте висящ класов компонент. Този компонент ще обработва добавяне и изтриване на всички събития, базирани на DOM слушатели.

пет. Започнете с импортиране на предварително създадена помощна функция и го извикайте, за да получите правилния браузър APIS. След това създайте реакционен компонент и инициализирайте състоянието му с един спад, инсталиран в True. Това булева област ще отговаря за състоянието на видимостта на страницата.

Изображение, озаглавено Неговото. Защита на действие и това.Forcevisibibibyfalse

6. В ComponentDidmount Добавяне на слушател на събития към документ за видимост на този метод.РъкохваткаПромяна като ръководител. Също така добавяйте слушателя на събития за фокусиране и размазване в документ, както и елемента на прозореца. Този път инсталираме това.Силажимост настраняване и това.COVERVISIVIEFALSE като товарни лица за събития фокус и размазване.

7. След това създайте метода на кормилото, който приема аргумент на ForceFlag. Аргументът Forcellag ще бъде използван, за да се определи дали методът е причинен поради събитието на видимостта или събития на фокус и размазване. Това е така, защото методите на силата на сила и насилниците не правят нищо, освен метода на дръжката на дръжката с истинска и невярна стойност за Forceflag.

Осем. Вътре в метода на дръжката на дръжката, първо проверете дали стойността на логическия аргумент на Forcellag е (ако е извикана от ръководителя на събития, предаваният аргумент ще бъде синтетичен обект).

Ако е булева, проверете, това е вярно или невярно. Когато стойността е вярна, извикайте метода на съвместимост с TRUE или се обадете на фалшивия метод. Методът на задаване използва това.Начин на настройка за актуализиране на ISVISIBLE стойността в състояние на компонент.

Ако Forcleflag не е булева, проверете стойността на скрития атрибут в документа и се обадете съответно на метода за задание. Тя завършва логиката за проследяване на състоянието на страницата.

девет. Направете няколко компонента. За да направите това, използвайте модела на реконструкция. Това е, вместо да прави компонент от метода на рендера, ние наричаме това.Професионалисти.Децата като функция с това.Държава.Isvisible.

10. Инсталирайте приложението REACT в DOM в индексния файл.JS. Импортирайте два реакции на висящи и видео компоненти и създайте компонент на приложение, като ги свържете. Ние предаваме функцията като детероден елемент на висящия компонент, който поема тенденцията и го предава на видео компонента на изхода. Ние също така предаваме видео URL като SRC за видео компонента. Така компонентът на Visiblemanager се основава на реконструкции. В края използваме метода на Reactdom.Да визуализира на DOM-възел с идентификатор "root".