Ich habe mit React herumgespielt und habe die folgende Zeitkomponente Date.now()
, die nur auf dem Bildschirm angezeigt wird:
import React, { Component } from 'react';
class TimeComponent extends Component {
constructor(props){
super(props);
this.state = { time: Date.now() };
}
render(){
return(
<div> { this.state.time } </div>
);
}
componentDidMount() {
console.log("TimeComponent Mounted...")
}
}
export default TimeComponent;
Was wäre der beste Weg, um diese Komponente jede Sekunde zu aktualisieren, um die Zeit aus der Perspektive von React neu zu zeichnen?
javascript
reactjs
Schneeflockenkiller
quelle
quelle
react-interval-rerender
Der folgende Code ist ein modifiziertes Beispiel von der React.js-Website.
Der Originalcode ist hier verfügbar: https://reactjs.org/#a-simple-component
quelle
updater
@ Waisky schlug vor:
Wenn Sie dasselbe tun möchten, verwenden Sie Hooks:
Zu den Kommentaren:
Sie müssen nichts hinein geben
[]
. Wenn Sietime
die Klammern übergeben, bedeutet dies, dass der Effekt jedes Mal ausgeführt wird, wenn sich der Wert vontime
Änderungen ändert, dhsetInterval
jedes Mal, wenn sichtime
Änderungen ändern, wird eine neue aufgerufen, was nicht das ist, wonach wir suchen. Wir wollen nur aufrufen ,setInterval
einmal , wenn das Bauteil montiert wird und dannsetInterval
ruftsetTime(Date.now())
alle 1000 Sekunden. Schließlich rufen wir auf,clearInterval
wenn die Komponente nicht gemountet ist.Beachten Sie, dass die Komponente
time
jedes Mal aktualisiert wird, je nachdem, wie Sie sie verwendet haben, wenn sich der Wert vontime
ändert. Das hat nichts damit zu tun , setzentime
in[]
deruseEffect
.quelle
[]
) als zweites Argument übergebenuseEffect
?In der
componentDidMount
Lebenszyklusmethode der Komponente können Sie ein Intervall festlegen, um eine Funktion aufzurufen, die den Status aktualisiert.quelle
quelle
Sie waren also auf dem richtigen Weg. In Ihrem Unternehmen hätten
componentDidMount()
Sie den Job durch ImplementierensetInterval()
beenden können, um die Änderung auszulösen. Denken Sie jedoch daran, dass die Aktualisierung eines Komponentenzustands übersetState()
erfolgt. In IhremcomponentDidMount()
System hätten Sie also Folgendes tun können:Sie verwenden auch,
Date.now()
was funktioniert, mit dercomponentDidMount()
Implementierung, die ich oben angeboten habe, aber Sie werden eine lange Reihe von bösen Zahlen aktualisieren, die nicht von Menschen lesbar sind, aber es ist technisch gesehen die Zeit, die seit dem 1. Januar 1970 jede Sekunde in Millisekunden aktualisiert wird, aber wir möchten diese Zeit lesbar machen, wie wir Menschen die Zeit lesen, alsosetInterval
möchten Sie zusätzlich zum Lernen und Implementieren etwas darüber lernennew Date()
undtoLocaleTimeString()
und Sie würden es so implementieren:Beachten Sie, dass ich die
constructor()
Funktion auch entfernt habe . Sie benötigen sie nicht unbedingt. Mein Refactor entspricht zu 100% der Initialisierung der Site mit derconstructor()
Funktion.quelle
Aufgrund von Änderungen in React V16, in denen componentWillReceiveProps () veraltet ist, verwende ich diese Methode zum Aktualisieren einer Komponente. Beachten Sie, dass sich das folgende Beispiel in Typescript befindet und die statische Methode getDerivedStateFromProps verwendet, um den Anfangsstatus und den aktualisierten Status abzurufen, wenn die Requisiten aktualisiert werden.
quelle