ReactJS实现实时日期间隔计数器 新手技术求助

嘿，作为React新手能想到用react-moment来处理日期计算已经很棒啦！你现在的问题主要是两点：一是没有让组件定时触发重渲染来更新时间，二是interval属性的配置不对。我给你调整一下代码，一步步说清楚怎么实现：

首先，我们需要用组件的state来管理当前时间，这样当时间更新时，React会自动触发组件重渲染；然后用定时器每秒更新一次当前时间，同时给Moment组件设置interval={1000}让它每秒刷新计算结果。另外还要记得在组件卸载时清除定时器，避免内存泄漏。

修改后的完整代码如下：

import './Home.css';
import React, { Component } from 'react';
import Moment from 'react-moment';

export default class Home extends Component {
  constructor(props) {
    super(props);
    // 初始化state，存储当前时间
    this.state = {
      currentTime: new Date()
    };
    // 保存定时器引用，方便后续清除
    this.timer = null;
  }

  componentDidMount() {
    // 每秒更新一次当前时间
    this.timer = setInterval(() => {
      this.setState({
        currentTime: new Date()
      });
    }, 1000);
  }

  componentWillUnmount() {
    // 组件卸载时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  render() {
    const together = "2017-05-14T06:30";
    return (
      <div>
        <p>
          我们已经在一起：
          {/* 使用state里的currentTime作为当前时间，interval设为1000毫秒每秒更新 */}
          <Moment 
            interval={1000}
            from={this.state.currentTime}
            to={together}
            // 可以自定义显示格式，比如显示年、月、日、时、分、秒
            format="YYYY年MM月DD日 HH时mm分ss秒"
          />
        </p>
      </div>
    );
  }
}

关键点解释： #

• state管理当前时间：把当前时间存在state里，每次调用setState更新时间时，React会自动重新渲染组件，这样计数器就能实时变化。
• interval={1000}：这个属性告诉react-moment每隔1000毫秒（也就是1秒）重新计算一次时间差，配合我们的定时器更新当前时间，就能实现秒级递增的效果。
• 清除定时器：在componentWillUnmount里清除定时器，是React类组件的最佳实践，防止组件卸载后定时器还在运行导致内存泄漏。

如果想要显示更简洁的时间差（比如“X年X月X天”），可以去掉format属性，react-moment会默认输出友好的相对时间格式哦~

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