React Hooks实现时钟效果

最新推荐文章于 2023-05-23 16:17:27 发布

原创最新推荐文章于 2023-05-23 16:17:27 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

12 篇文章

订阅专栏

这篇博客展示了如何在React应用中使用Hooks来实现实时时间更新。通过useState和useEffect钩子，作者创建了一个组件，每秒更新当前时间并用formatData函数进行格式化显示，提供了一种在前端展示日期和时间的实用方法。

Hooks代码

import React, { useState, useEffect } from "react";
import "./header.css";
import { formatData } from "../../util/dataUtil";
function Header() {
  const [currentTime, setCurrentTime] = useState(Date.now());
  const [time, setTime] = useState("");
  useEffect(() => {
    getTime();
  }, [time]);
  const getTime = () => {
    const timeID = setInterval(() => {
      setCurrentTime(Date.now());
      const result = formatData(currentTime);
      console.log(result);
      setTime(result);
      clearInterval(timeID);
    }, 1000);
  };

  return <div className="header">{time}</div>;
}

export default Header;

formatData 代码

export const formatData = (str) => {
  var newstr = new Date(str);
  var y = newstr.getFullYear();
  var m = newstr.getMonth() + 1;
  var d = newstr.getDate();
  var h = newstr.getHours();
  var min = newstr.getMinutes();
  var s = newstr.getSeconds();
  return `${y}-${m}-${d} ${h}:${min}:${s}`;
};