Réagissez-- Le chronomètre commence à compter les secondes en un clic de bouton

Question

Je construis un petit jeu avec React et je suis prêt à inclure un compte à rebours.

Il existe de nombreux didacticiels (dont un dans la documentation officielle de React) sur la façon de créer un minuteur ou un compte à rebours avec React. Tous utilisent cependant les méthodes de cycle de vie componentDidMount et componentWillUnmount pour définir et effacer respectivement l'intervalle.

Cela fonctionne correctement, mais la minuterie commence à compter le moment où le composant est monté. Je voudrais avoir une minuterie qui commence à compter surClick. Quelles sont les méthodes de cycle de vie appropriées pour réaliser un tel comportement?

J'ai déjà essayé componentWillUpdate et componentDidUpdate mais sans aucun effet. Ma première pensée était d'utiliser une propriété gameOn afin d'activer la minuterie seulement quand le jeu est activé (c'est-à-dire que le bouton de démarrage a été enfoncé) mais cela n'a pas fonctionné parce que je devine gameOn à true , longtemps après le composant didMount.

J'ai également essayé de déplacer ces deux méthodes avec l'état approprié ({secondsElapsed: 0}) sur le composant Timer, puisque Timer est un composant séparé qui communique avec son parent à travers les accessoires. Cela aussi n'avait pas de chance.

Enfin, j'ai essayé de définir this.interval = null; sur ma fonction de constructeur, mais cela n'avait aucune différence sur le fonctionnement du temporisateur.

Je pense que la racine du problème est les méthodes du cycle de vie, car celles-ci contrôlent quand setInterval et clearInterval seront appelés. Donc ma question est la suivante:

Quelle autre combinaison de méthodes de cycle de vie dois-je utiliser pour obtenir le comportement que je suis après?

Toute suggestion bien comprise sera appréciée.

Points bonus si vous pouvez expliquer en termes clairs pourquoi et quand dois-je déclarer this.interval = null; sur ma fonction constructeur.

Pour un exemple de ce que j'ai jusqu'à présent, regardez vraiment essentiellement à la « A Stateful Component »

Answer 1

componentWillUnmount() { 
    clearInterval(this.interval); // Always clean up before unmounting 
} 

render(){ 
    <div> 
    <button 
     onClick={() => { this.interval = setInterval(() => { 
     // Do something here e.g. increment the time 
     // NOTE: `this` keyword here refers to the component itself 
     }, 1000); }}> 
     Start 
    </button> 
    </div> 
}