React定时器/时钟组件渲染正常但计时功能不生效问题求助

问题核心原因 #

• 你定义的sec、min、hrs是全局普通变量，不属于React组件的状态，React不会监听这类变量的变更，哪怕值更新了也不会触发组件重新渲染，所以页面上的计时数值看起来没有变化。
• 你把timer()放在了render方法里，每次组件渲染都会触发一次新的定时器创建，最终会同时运行N个定时器，不仅计时速度异常，还会产生严重的内存泄漏风险。
• 全局的定时器ID没有在组件卸载时清理，组件销毁后定时器还会在后台继续运行。

修正后的完整代码 #

import React from 'react'

// Clock Component
class Clock extends React.Component{
    // 初始化组件状态
    state = {
        sec: 0,
        min: 0,
        hrs: 0,
        timerId: null
    }

    // 组件挂载完成后启动定时器
    componentDidMount() {
        const timerId = setInterval(() => {
            this.setState(prevState => {
                let {sec, min, hrs} = prevState
                sec++
                if (sec >= 60) {
                    sec = 0
                    min++
                    if (min >= 60) {
                        min = 0
                        hrs++
                    }
                }
                return {sec, min, hrs}
            })
        }, 1000)
        this.setState({timerId})
    }

    // 组件卸载前清理定时器，避免内存泄漏
    componentWillUnmount() {
        clearInterval(this.state.timerId)
    }

    // 停止计时的方法
    handleStop = () => {
        clearInterval(this.state.timerId)
    }

    render(){
        const {hrs, min, sec} = this.state
        return (
            <div className="clock-face">
                <h4> {hrs} : {min} : {sec}</h4>
                <button onClick={this.handleStop}> Stop </button>
            </div>
        );
    }   
}

export default Clock;

关键修改说明 #

• 把计时相关变量全部放入组件的state中，调用setState更新状态会自动触发组件重新渲染，页面数值会同步更新。
• 把定时器启动逻辑放到生命周期函数componentDidMount中，组件挂载完成后只会启动一次定时器，避免重复创建。
• 改用setInterval实现定时触发，不需要递归调用setTimeout，逻辑更简洁。
• 新增componentWillUnmount生命周期清理定时器，避免组件销毁后定时器继续运行导致内存泄漏。
• 停止按钮的逻辑直接绑定类方法，性能比内联箭头函数更优。

内容的提问来源于stack exchange，提问作者angelaM