React Clock组件每秒触发渲染却不更新页面的问题排查

核心问题点 #

1. state拼写错误：React组件的状态属性是小写的this.state，你写成了大写的this.State，导致组件无法正确读取和更新状态。
2. 初始化逻辑仅执行一次：即便拼写正确，date值只在组件构造函数中初始化一次，后续外部重新渲染组件时，构造函数不会再次执行，时间值不会刷新。
3. 错误的更新方式：从外部通过root.render强制重新渲染组件不符合React的设计逻辑，组件的更新应该由自身状态变化驱动。

修正后的代码 #

Clock组件

import React from 'react'

class Clock extends React.Component{
    constructor(){
        super();
        // 修正state拼写为小写
        this.state={
            date: new Date()
        }
    }

    // 组件挂载后启动定时器，每秒更新状态
    componentDidMount() {
        this.timer = setInterval(() => {
            // 使用setState更新状态，触发组件重新渲染
            this.setState({
                date: new Date()
            })
        }, 1000)
    }

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

    render(){
        return(
            <>
            <h1>{this.state.date.toLocaleTimeString()}</h1>
            </>
        )
    }
}

export default Clock;

index.js

import Clock from './Clock';
import ReactDOM from 'react-dom/client';

const root=ReactDOM.createRoot(document.getElementById("root"));
// 仅需渲染一次，组件内部会自行更新
root.render(<Clock/>);

关键React概念补充 #

React组件的更新依赖状态（state）的变更：只有通过setState方法修改state，React才会触发组件的重新渲染并更新DOM。组件的生命周期方法（如componentDidMount、componentWillUnmount）用于处理挂载后的副作用（如定时器）和资源清理，这是组件管理自身行为的标准方式。

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