React中实现moment格式化日期每秒更新并重新渲染的方法

嘿，这个问题我之前也碰到过，用React的useState和useEffect钩子就能轻松搞定，让日期每秒自动更新并触发组件重渲染。下面是修改后的完整代码：

import "./assets/styles/App.scss";
import moment from "moment";
import React, { useState, useEffect } from "react";

function App() {
  // 用useState存当前日期状态，初始值设为格式化后的当前时间
  const [date, setDate] = useState(moment(new Date()).format("dddd, MMMM Do YYYY, h:mm:ss a"));

  useEffect(() => {
    // 开个定时器，每秒更新一次日期状态
    const updateTimer = setInterval(() => {
      const freshDate = moment(new Date()).format("dddd, MMMM Do YYYY, h:mm:ss a");
      setDate(freshDate);
    }, 1000);

    // 组件卸载时记得清掉定时器，*别留内存泄漏的隐患*
    return () => clearInterval(updateTimer);
  }, []); // 空依赖数组保证这个effect只在组件挂载时跑一次

  return <div className="App">{date}</div>;
}

export default App;

关键逻辑拆解： #

• useState：把日期放进状态变量里，React会自动监听状态变化，一旦调用setDate更新值，组件就会重新渲染，展示最新的时间。
• useEffect：用来处理定时器这种“副作用”，每1秒执行一次回调更新日期。空依赖数组[]确保定时器只在组件第一次挂载时创建，不会重复生成多个定时器。
• 清理定时器：useEffect返回的函数会在组件卸载时执行，这里用来清除定时器，避免组件卸载后定时器仍在后台运行，造成不必要的内存浪费。

这样改完，你的组件就会每秒刷新一次日期啦～

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