Како да креирате едноставна компонента за реакција која ја следи "страницата за видливост на страница"

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

Постои API видливост на страницата, која работи одлично во повеќето случаи, но не се справува со сета можна невидливост на јазичето за прелистувач. Страна видливост API испраќа настан видливост, така што слушателите знаат дека страницата видливост државата е променета. Не започнува настан во некои случаи ако прозорецот или соодветниот прелистувач е скриен надвор од очите. За да се справи со некои од овие случаи, ние треба да користиме комбинација на фокус и замаглување во двата документи и прозорец.

Значи, од овој напис ќе научите како да креирате едноставна компонента за реакција, која ја следи состојбата на видливост на страницата.

Чекори

За да креирате апликација за реакција, кодексите ќе се користат овде (исто така можете да ја користите App-App). Ние ќе создадеме мала апликација во која елементот HTML5 ќе се одигра само ако јазичето на прелистувачот е во фокусот или активен, инаку ќе биде прекинат автоматски. Видео Се користи за олеснување на тестирањето на функциите на апликацијата.

Еден. Започнете со создавање на наједноставен дел, тоа е, компонентата видео. Тоа ќе биде едноставна компонента со булевни активни и стринг SRC параметри кои го содржат URL-то за видео. Ако активните реквизити се точни, видео ќе се репродуцира. Инаку тоа ќе биде запрено.

Сликата насловена од DIXPLEVITIBITIALUTILSJWSRCDIRCERCERESTORY

2. Креирај едноставна реакција класа и елемент видео со својот изворен код хостинг URL пренесени со користење на SRC. Еве нов AF API за прикачување на линкови до видео-јазол видео. Ќе го конфигурирате видеото на Avto Replay, претпоставувајќи дека кога ќе ја започнете апликацијата, страницата ќе биде активна.

Safari автоматски не игра мултимедијални елементи без интеракција на корисникот. Методот со компатибилност е многу лесен при обработка на ефекти кога се менува имотот на компонентата. Затоа, овој метод ќе се користи тука за играње и суспендирање на видео врз основа на тековната вредност на ова.Добрите.Активен.

3. Креирај функција алатка. Разликите во префиксите на прелистувачот не се секогаш погодни за користење на одредени API-и, и еден од нив. Ние ќе создадеме едноставна функција за комунални услуги која ќе ги задоволи овие разлики и ќе го врати еден API базиран на прелистувачот на корисникот. Креирај и извоз на оваа функција од страницабрибилите.JS во SRC директориум.

Во оваа функција, ние ќе ја користиме изјавата на IF-ense за да го вратиме интерфејсот API специфичен за прелистувачот. Може да се види дека го додаваме префиксот MS за Internet Explorer и WebKit префикс за WebKit прелистувачи. Ние ќе го зачуваме саканиот API во скриени и видливи променливи и ќе ги вратиме од функција како едноставен објект. Конечно, ја извезуваме функцијата.

Четири. Отидете до главната компонента. Ние ја инкаптурираме сите веб-страници за следење на страницата во класата на Класа на реакција со користење на шаблонот за реквизити. Креирајте компонента за класа на видливост. Оваа компонента ќе се справи со додавање и бришење на сите настани врз основа на LOM слушатели.

Пет. Започнете со увоз на претходно креирана помошна функција и го повикате за да го добиете вистинскиот прелистувач API. Потоа креирајте компонента за реакција и иницијализирајте ја својата состојба со една невидлива инсталирана во вистинито. Ова булево поле ќе биде одговорно за состојбата на видливоста на страницата.

Сликата под наслов Неговата.ForceviBizitiblyTrue и овој.ForcevisiBiblityFalse

6. Во компонентата за додавање на слушателот на настанот до документот за видливост користејќи го овој метод.handlevisibliblechange како управувач. Исто така додадете слушател на настани за фокус и заматените настани во документот, како и елементот на прозорецот. Овој пат го инсталираме ова.Forcevibilditytrue и ова.Forcevibilityfalse како ракувачи за фокусирање на настани и замаглување.

7. Потоа креирајте го методот на ракување кој го зема аргументот на FoldFlag. Аргументот на Forceflag ќе се користи за да се утврди дали методот е предизвикан поради настанот во видливост или фокусирање и заматување на настаните. Ова е затоа што методите на forcevibibilityTrue.

осум. Внатре во методот на ракување, прво проверете дали вредноста на логичкиот аргумент на forplagfange е (ако се повика од ракувачот на настанот во видливост, пренесениот аргумент ќе биде синтетински објект).

Ако е булева, проверете, тоа е точно или неточно. Кога вредноста е вистина, јавете се на методот на setCimity со True или јавете се на лажниот метод. Методот на SetVistivity го користи ова.Метод на SETSTATE за ажурирање на невидливата вредност во состојба на компонента.

Ако formplag не е boolean, проверете ја вредноста на скриениот атрибут во документот и соодветно го повикувате методот за поставување. Ја комплетира логиката за следење на статусот на страницата.

Девет. Направи повеќекратна компонента. За да го направите ова, користете го реквизитот на реквизитите. Тоа е, наместо да се направи компонента од методот на рендерирање, ние го нарекуваме ова.Добрите.Деца како функција со ова.Држава.е невидлив.

10. Инсталирајте ја апликацијата за реакција во ДОМ во индексната датотека.JS. Увези две реагираат видливост и видео компоненти и креирајте компонента за апликација со поврзување на нив. Ние ја пренесуваме функцијата како детски елемент на компонентата за видливост, која ја презема невидливата и ја пренесува на видео компонентата на излезот. Ние исто така го пренесуваме видео URL-то како SRC за видео компонента. Ова е начинот на кој компонентата Висибломенер се базира на реквизити. На крајот го користиме методот на реакта.Render за апликација рендерирање на Dom-јазол со "root" идентификатор.