web-dev-qa-db-ja.com

ネイティブ表示の現在の時間に反応し、リアルタイムで秒を更新します

私は時計のようなネイティブアプリに反応して現在の時間（MM/DD/YY hh：mm：ss）を表示し、毎秒更新し、新しいDate（）を使用して状態に設定しようとしましたが、時間ドンページを更新しない限り更新しないでください。また、render（）でsetInterval関数を使用してみましたが、更新は行われますが、CPUに負荷がかかります。機能を実現する良い方法はありますか？

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

setIntervalをcomponentDidMount関数に移動するだけです。

このような ：

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

これにより状態が変更され、1秒ごとに更新されます。

28
Nguyên Hoàng

このメソッドは正常に機能し、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>
        );
      }
    }

元のリンク： https://openclassrooms.com/courses/build-web-apps-with-reactjs/build-a-ticking-clock-component

11
Kuhan

私は答えを得ました。以下のコードも機能します。

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

setTimeoutの代わりにsetIntervalを使用することをお勧めします。実際、ブラウザは重い処理に圧倒される可能性があります。その場合は、状態。

setTimeoutを使用すると、ページが非表示になったときにPage Visibility APIを利用して時計を完全に停止することも少し簡単になります（ https://developer.mozilla.org/en-US/docsを参照）/Web/API/Page_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