私は時計のようなネイティブアプリに反応して現在の時間(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>
);
}
setInterval
をcomponentDidMount関数に移動するだけです。
このような :
componentDidMount() {
setInterval( () => {
this.setState({
curTime : new Date().toLocaleString()
})
},1000)
}
これにより状態が変更され、1秒ごとに更新されます。
このメソッドは正常に機能し、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
私は答えを得ました。以下のコードも機能します。
componentWillMount(){
setInterval(function(){
this.setState({
curTime: new Date().toLocaleString()
})
}.bind(this), 1000);
}
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);
}
}