我一直在玩 React 并且有以下时间组件,它只是呈现Date.now()到屏幕上:
Date.now()
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;
从 React 的角度来看,让这个组件每秒更新一次以重新绘制时间的最佳方法是什么?
您需要使用setInterval来触发更改,但您还需要在组件卸载时清除计时器,以防止它留下错误和泄漏内存:
setInterval
componentDidMount() { this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000); } componentWillUnmount() { clearInterval(this.interval); }