So implementieren Sie den React-Native-Timer Timer

In der Webentwicklung müssen wir normalerweise die Timer-Funktion verwenden, indem wir die Funktionen setTimeout und setInterval verwenden. In diesem Artikel wird hauptsächlich der Implementierungscode des Timers Timer in React-Native vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Bietet ReactNative also auch die Timer-Funktion? Die Antwort ist ja.

Schauen wir uns zunächst an, was auf der offiziellen Website steht.

Timer ist ein sehr wichtiger Teil einer Anwendung. React Native implementiert einen Timer, der mit dem Browser konsistent ist.

Die bereitgestellten Methoden lauten wie folgt:

• setTimeout, clearTimeout

• setInterval, clearInterval

• setImmediate, clearImmediate

• requestAnimationFrame, cancelAnimationFrame

setTimeout (fn, 1000) und setInterval (fn, 1000 )

hat die gleiche Bedeutung wie im Web. Ersteres bedeutet, die fn-Methode nach einer Verzögerung von 1000 Millisekunden auszuführen, und letzteres bedeutet, die fn-Methode alle 1000 Millisekunden auszuführen.

requestAnimationFrame(fn) unterscheidet sich von setTimeout(fn, 0). Ersteres wird einmal nach jeder Frame-Aktualisierung ausgeführt, während letzteres so schnell wie möglich ausgeführt wird (möglicherweise mehr als 1000 Mal pro Sekunde). iPhone5S).

setImmediate wird am Ende des aktuellen JavaScript-Ausführungsblocks ausgeführt, kurz bevor Batch-Antwortdaten an native gesendet werden. Beachten Sie, dass, wenn Sie setImmediate in der Rückruffunktion von setImmediate ausführen, diese sofort ausgeführt wird, ohne vor dem Aufruf auf den nativen Code warten zu müssen.

Die Implementierung von Promise verwendet setImmediate, um asynchrone Aufrufe durchzuführen.

InteractionManager (Interaction Manager)

Ein wichtiger Grund, warum sich native Anwendungen so reibungslos anfühlen, besteht darin, schwere Vorgänge bei Interaktionen und Animationen zu vermeiden. Bei React Native sind wir derzeit eingeschränkt, da wir nur einen JavaScript-Ausführungsthread haben. Sie können jedoch den InteractionManager verwenden, um sicherzustellen, dass alle Interaktionen und Animationen verarbeitet wurden, bevor Sie die schwere Arbeit erledigen.

Die Anwendung kann eine Aufgabe planen, die nach Beendigung der Interaktion ausgeführt werden soll, indem sie den folgenden Code verwendet:

InteractionManager.runAfterInteractions(() => { 
  // ...需要长时间同步执行的任务... 
});

Vergleichen wir es mit mehreren früheren Methoden zur Aufgabenplanung:

requestAnimationFrame(): wird zum Ausführen von Code verwendet, der die Ansichtsanimation innerhalb eines Zeitraums

setImmediate/setTimeout steuert /setInterval(): Code später ausführen. Beachten Sie, dass dies die aktuell laufende Animation verzögern kann.

runAfterInteractions(): Führt den Code später aus, ohne die aktuell laufende Animation zu verzögern.
Das Touch-Verarbeitungssystem identifiziert einen oder mehrere laufende Touch-Vorgänge als „Interaktion“ und verzögert die Ausführung der Rückruffunktion von runAfterInteractions(), bis alle Touch-Vorgänge beendet oder abgebrochen wurden.

InteractionManager ermöglicht es Anwendungen auch, Animationen zu registrieren, ein Interaktions-„Handle“ zu erstellen, wenn die Animation beginnt, und es dann zu löschen, wenn sie endet.

var handle = InteractionManager.createInteractionHandle(); 
// 执行动画... (`runAfterInteractions`中的任务现在开始排队等候) 
// 在动画完成之后 
InteractionManager.clearInteractionHandle(handle); 
// 在所有句柄都清除之后，现在开始依序执行队列中的任务

TimerMixin

Wir haben festgestellt, dass viele schwerwiegende Fehler (Crashbacks) in React Native-Anwendungen damit zusammenhängen Timing bezogen auf das Gerät. Insbesondere ist der Timer weiterhin aktiviert, nachdem eine Komponente nicht gemountet wurde. Um dieses Problem zu lösen, haben wir TimerMixin eingeführt. Wenn Sie TimerMixin in die Komponente einführen, können Sie Ihr ursprüngliches setTimeout(fn, 500) in this.setTimeout(fn, 500) ändern (fügen Sie einfach Folgendes hinzu.) und dann, wenn Ihre Komponente entladen wird, alle Das Timer-Ereignis wird auch korrekt gelöscht werden.

Diese Bibliothek wird nicht mit React Native veröffentlicht. Um es separat zu installieren, müssen Sie npm i reagieren-timer-mixin --save im Projektordner eingeben.

var TimerMixin = require('react-timer-mixin'); 
 
var Component = React.createClass({ 
 mixins: [TimerMixin], 
 componentDidMount: function() { 
  this.setTimeout( 
   () => { console.log('这样我就不会导致内存泄露!'); }, 
   500 
  ); 
 } 
});

Wir empfehlen dringend, dass Sie this.setTimeout(...) verwenden, das von React-Timer-Mixin bereitgestellt wird, anstelle von setTimeout(...). Dadurch können viele Fehler vermieden werden, die schwer zu beheben sind.

Anmerkung: Mixin gehört zur ES5-Syntax. Für ES6-Code kann Mixin nicht direkt verwendet werden.

Wenn Ihr Projekt in ES6-Code geschrieben ist und Timer verwendet, müssen Sie beim Aushängen der Komponente nur daran denken, alle verwendeten Timer zu löschen (clearTimeout/clearInterval).

Dann können Sie auch den gleichen Effekt wie TimerMixin erzielen. Zum Beispiel:

import React,{ 
 Component 
} from 'react-native'; 
 
 
export default class Hello extends Component { 
 componentDidMount() { 
  this.timer = setTimeout( 
   () => { console.log('把一个定时器的引用挂在this上'); }, 
   500 
  ); 
 } 
 componentWillUnmount() { 
  // 如果存在this.timer，则使用clearTimeout清空。 
  // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear 
  this.timer && clearTimeout(this.timer); 
 } 
};

Hinweis:

1. Die Timer-Funktion ist relativ einfach. Wenn Sie sie in es6 verwenden, müssen Sie daran denken, alle verwendeten Timer zu löschen (clearTimeout/clearInterval).
2. Sie können Timer verwenden, um einige allgemeine Funktionen zu implementieren: z. B. Countdowns für Textnachrichten usw.
3. Sie können Timer auch für einige spezielle Szenarien verwenden, die eine verzögerte Ausführung erfordern RN bietet keine Zeitüberschreitungseinstellung. Wenn der Client eine Schnittstelle im Backend anfordert und die Schnittstelle eine Zeitüberschreitung erfährt (die vom Backend-Dienst festgelegte Zeitüberschreitung beträgt 10 Sekunden), wird die RN-Schnittstelle immer geladen und kann nicht abgebrochen werden. Dann können wir den Timer zu diesem Zeitpunkt geschickt nutzen. Wenn die Zeit der vom Client gesendeten Anfrage einen bestimmten Wert (5 Sekunden) überschreitet, betrachten wir die Anfrage direkt als fehlgeschlagen.
4. Heute habe ich auch ein Szenario gefunden, in dem setTimeout verwendet wird, wenn die Schnittstelle schnell reagiert. Zu diesem Zeitpunkt gibt es keinen Ladeeffekt. Stellen Sie eine Verzögerung von 500 Millisekunden ein, haha....

Verwandte Empfehlungen:

Erklären Sie, wie Sie das jQuery-Sektor-Timer-Plug-in Pietimer verwenden

C# Über die Lösung des Timer-Timer-Wiedereintrittsproblems

php-Timer-Seiten-Laufzeitüberwachungsklasse

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den React-Native-Timer Timer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!