web-dev-qa-db-fra.com

réagir en temps réel à l'heure actuelle et mettre à jour les secondes en temps réel

Je veux afficher l'heure actuelle (MM/JJ/AA hh: mm: ss) dans l'application native de réaction comme une horloge, et obtenir une mise à jour toutes les secondes, j'ai essayé d'utiliser la nouvelle date () et de la définir dans l'état, mais l'heure don ne mets pas à jour sauf si je rafraîchis la page. J'ai également essayé d'utiliser la fonction setInterval dans render (), il a une mise à jour mais c'est cher pour le CPU. existe-t-il une bonne méthode pour réaliser la fonction?

state = {
    curTime: null,
}
render(){
    setInterval(function(){this.setState({curTime: new  Date().toLocaleString()});}.bind(this), 1000);
    return (
        <View>
            <Text style={headerStyle.marginBottom15}>Date: {this.state.curTime}</Text>
        </View>
    );
}
reactjstimerreact-nativeclock
10
inoutwhy

Déplacez simplement setInterval dans la fonction componentDidMount.

Comme ça :

  componentDidMount() {
    setInterval( () => {
      this.setState({
        curTime : new Date().toLocaleString()
      })
    },1000)
  }

Cela va changer d'état et se mettre à jour toutes les 1s.

28
Nguyên Hoàng

Cette méthode fonctionne correctement et affiche MM/DD/YY hh: mm: ss 

class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          time: new Date().toLocaleString()
        };
      }
      componentDidMount() {
        this.intervalID = setInterval(
          () => this.tick(),
          1000
        );
      }
      componentWillUnmount() {
        clearInterval(this.intervalID);
      }
      tick() {
        this.setState({
          time: new Date().toLocaleString()
        });
      }
      render() {
        return (
          <p className="App-clock">
            The time is {this.state.time}.
          </p>
        );
      }
    }

lien d'origine: https://openclassrooms.com/courses/build-web-apps-with-reactjs/build-a-ticking-clock-component

11
Kuhan

J'ai eu la réponse. Le code ci-dessous fonctionne également.

componentWillMount(){
    setInterval(function(){
        this.setState({
            curTime: new Date().toLocaleString()
        })
    }.bind(this), 1000);
}
3
inoutwhy

Je recommanderais de préférer utiliser setTimeout au lieu de setInterval, en effet, le navigateur peut être surchargé par un traitement lourd et dans ce cas, vous préféreriez probablement mettre à jour l'horloge moins souvent au lieu de mettre en file d'attente plusieurs mises à jour de l'état.

Avec setTimeout, il est également un peu plus facile de tirer parti de l'API de visibilité de la page pour arrêter complètement l'horloge lorsque la page est masquée (voir https://developer.mozilla.org/en-US/docs/Web/API /▶Visibility_API ).

export default class MyClock {
  constructor(props) {
    super(props);

    this.state = {
      currentTime: Date.now(),
    }; 
  }

  updateCurrentTime() {
    this.setState(state => ({
      ...state,
      currentTime: Date.now(),
    }));
    this.timeoutId = setTimeout(this.updateCurrentTime.bind(this), 1000);
  }

  componentWillMount() {
    this.updateCurrentTime();
    document.addEventListener('visibilitychange', () => {
      if(document.hidden) {
        clearTimeout(this.timeoutId);
      } else {
        this.updateCurrentTime();
      }
    }, false);
  }

  componentWillUnmount() {
    clearTimeout(this.timeoutId);
  }
}
2
nfroidure