react实现定时器

最新推荐文章于 2023-11-08 18:02:50 发布

原创最新推荐文章于 2023-11-08 18:02:50 发布 · 7.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react #定时器

react-redux 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个基于React实现的简单计时器组件。该组件通过设置状态来更新显示的秒数，并使用了定时器来每秒触发状态更新。文章还展示了如何在组件卸载时清除定时器以避免内存泄漏。

class Timer extends Component {
    state = {
        seconds: 0
    }
    tick = () => {
        const { seconds } = this.state;
        this.setState({
            seconds: seconds + 1
        })
    }
    componentDidMount() {
        // 定时器，可以修改1000为自己想要的时间，
        this.interval = setInterval(() => this.tick(), 1000);  
    }

    componentWillUnmount() {
        // 清除定时器
        clearInterval(this.interval);
    }
    render() {
        return (
            <div>Seconds:{this.state.seconds}</div>
        )
    }
} 
export default Timer;