react实现实时计时的最简方式
js中时间的处理，不借助于moment/dayjs这样的工具库，原生获取格式化的时间，最简单的实现方式可以参考下面这样。
实现效果
代码实现
- 封装hooks
import { useState, useEffect } from "react";export function useCountTime() {const [time, setTime] = useState(new Date());useEffect(() => {const timer = setInterval(() => {setTime(new Date());}, 1000);return () => {clearInterval(timer);};}, []);return formatDate(time);
}function formatDate(date) {return date.toLocaleString("zh-cn", {weekday: "long",year: "numeric",month: "long",day: "numeric",hour: "numeric",minute: "numeric",second: "numeric",});
}
- 使用
import { useCountTime } from "../../components/TimeCount";...
const time = useCountTime()
return (<><h3>今天是星期 {time}</h3></>
)
鲜为人知的内置时间格式化
function formatDate(date) {return new Intl.DateTimeFormat("zh-CN", {hour: "numeric",minute: "numeric",second: "numeric",hour12: false,weekday: "long",year: "numeric",month: "long",day: "numeric",}).format(date);
}
福利推送
文档参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
有兴趣的可以去了解下
鼠标移动坐标
- 封装鼠标移动坐标的hooks
import { useState, useEffect } from "react";export function useMouse() {const [mouse, setMouse] = useState({ x: 0, y: 0 });function handleMouseMove(event) {setMouse({ x: event.clientX, y: event.clientY });}useEffect(() => {window.addEventListener("mousemove", handleMouseMove);return () => {window.removeEventListener("mousemove", handleMouseMove);};}, []);return mouse;
}
import { useMouse } from "../../hooks/userMouse";
const { x, y } = useMouse();
return (<><div>x:{x} y:{y}</div></>
)