Comment implémenter le minuteur React-Native

Dans le développement Web, nous devons généralement utiliser la fonction timer, en utilisant les fonctions setTimeout et setInterval. Cet article présente principalement le code d'implémentation du timer Timer dans React-Native. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Alors ReactNative fournit-il également la fonction de minuterie ? La réponse est oui.

Jetons d’abord un coup d’œil à ce que dit le site officiel.

La minuterie est une partie très importante d'une application. React Native implémente une minuterie cohérente avec le navigateur.

Les méthodes fournies sont les suivantes :

• setTimeout, clearTimeout

• setInterval, clearInterval

• setImmediate, clearImmediate

• requestAnimationFrame, CancelAnimationFrame

setTimeout (fn, 1000) et setInterval (fn,1000 )

a la même signification que sur le Web. Le premier signifie exécuter la méthode fn après un délai de 1000 millisecondes, et le second signifie exécuter la méthode fn toutes les 1000 millisecondes.

requestAnimationFrame(fn) est différent de setTimeout(fn, 0). Le premier sera exécuté une fois après chaque rafraîchissement d'image, tandis que le second sera exécuté le plus rapidement possible (éventuellement plus de 1000 fois par seconde). iPhone5S) .

setImmediate sera exécuté à la fin du bloc d'exécution JavaScript actuel, juste avant d'envoyer les données de réponse par lots au natif. Notez que si vous exécutez setImmediate dans la fonction de rappel de setImmediate, elle sera exécutée immédiatement sans attendre le code natif avant d'appeler.

L'implémentation de Promise utilise setImmediate pour effectuer des appels asynchrones.

InteractionManager (Interaction Manager)

Une raison importante pour laquelle les applications natives sont si fluides est d'éviter les opérations lourdes lors des interactions et des animations. Dans React Native, nous sommes actuellement limités car nous n'avons qu'un seul thread d'exécution JavaScript. Cependant, vous pouvez utiliser InteractionManager pour vous assurer que toutes les interactions et animations ont été gérées avant de faire le gros du travail.

L'application peut planifier l'exécution d'une tâche après la fin de l'interaction en utilisant le code suivant :

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

Comparons-le avec plusieurs méthodes de planification de tâches précédentes :

requestAnimationFrame() : utilisée pour exécuter du code qui contrôle l'animation de la vue sur une période de temps

setImmediate/setTimeout /setInterval() : exécute le code plus tard. Notez que cela peut retarder l'animation en cours.

runAfterInteractions() : exécute le code plus tard sans retarder l'animation en cours.
Le système de traitement tactile identifiera une ou plusieurs opérations tactiles en cours comme « interaction » et retardera l'exécution de la fonction de rappel de runAfterInteractions() jusqu'à ce que toutes les opérations tactiles soient terminées ou annulées.

InteractionManager permet également aux applications d'enregistrer des animations, en créant un « handle » d'interaction lorsque l'animation démarre, puis en l'effaçant à la fin.

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

TimerMixin

Nous avons constaté que de nombreuses erreurs fatales (crashbacks) dans les applications React Native sont liées à timing lié à l’appareil. Plus précisément, après le démontage d'un composant, la minuterie est toujours activée. Pour résoudre ce problème, nous avons introduit TimerMixin. Si vous introduisez TimerMixin dans votre composant, vous pouvez changer votre setTimeout(fn, 500) d'origine en this.setTimeout(fn, 500) (ajoutez simplement ceci. devant), puis lorsque votre composant est déchargé, tout le timer l’événement sera également effacé correctement.

Cette bibliothèque n'est pas publiée avec React Native. Vous devez entrer npm i react-timer-mixin --save dans le dossier du projet pour l'installer séparément.

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

Nous vous recommandons fortement d'utiliser this.setTimeout(...) fourni par réagir-timer-mixin au lieu de setTimeout(...). Cela peut éviter de nombreux bugs difficiles à résoudre.

Annotation : Mixin appartient à la syntaxe ES5. Pour le code ES6, Mixin ne peut pas être utilisé directement.

Si votre projet est écrit en code ES6 et utilise des timers, alors il vous suffit de penser à effacer (clearTimeout/clearInterval) tous les timers utilisés lors du démontage du composant.

Ensuite, vous pouvez également obtenir le même effet que TimerMixin. Par exemple :

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); 
 } 
};

Remarque :

1. La fonction timer est relativement simple. Lorsque vous l'utilisez dans es6, vous devez vous rappeler d'effacer (clearTimeout/clearInterval) toutes les minuteries utilisées lors du démontage du composant.
2. Vous pouvez utiliser des minuteries pour implémenter certaines fonctions courantes : telles que les comptes à rebours des messages texte, etc.
3. Vous pouvez également utiliser des minuteries pour certains scénarios spéciaux qui nécessitent une exécution retardée. RN ne fournit pas de paramètre de délai d'attente. Si le client demande une interface sur le backend et que l'interface expire (le délai d'attente défini par le service backend est de 10 s), alors l'interface RN sera toujours en cours de chargement et ne pourra pas être abandonnée. Ensuite, nous pouvons utiliser intelligemment le timer à ce moment-là. Si le temps de la requête envoyée par le client est supérieur à une certaine valeur (5 secondes), alors nous considérerons directement que la requête a échoué.
4. Aujourd'hui, j'ai également trouvé un scénario où setTimeout est utilisé Lorsque la page de liste charge la page suivante, si l'interface répond rapidement, il n'y aura pas d'effet de chargement à ce moment-là, afin d'avoir l'effet de chargement. définissez un délai de 500 millisecondes, haha....

Recommandations associées :

Partage de la façon d'utiliser le plug-in de minuterie de secteur jQuery pietimer

C# À propos de la solution au problème de ré-entrée du minuteur

Classe de surveillance du temps d'exécution de la page PHP Timer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!