react 拿到 实时 本地时间： 年-月-日 时：分：秒 星期几

1.dayjs 安装

npm install dayjs --save

2.使用

import dayjs from 'dayjs';

const ZHOU = [
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六',
];

export default function Index(props: any) {
  const [s, setS] = useState('');
  const [day, setDay] = useState('');
  const [zhou, setZhou] = useState('');

  useEffect(() => {
    setInterval(() => {
      const date = dayjs();
      const sound = date.format('HH:mm:ss');
      const day = date.format('YYYY-MM-DD');
      const time = date.day();
      setZhou(ZHOU[time]);
      setS(sound);
      setDay(day);
      // setZhou(zhou)
    }, 1000);
    return () => {};
  }, []);
  return (
  		<div className="small_body">
            <div className="font_blue font_normal ">{s}</div>
            <div className="d-sgap"></div>
            <div className="font_small">
              <div className="sposition">{day}</div>
              <div className="font_blue lettle_s ">{zhou}</div>
            </div>
  		</div>
  )

原理

变化原因：本地时间发生变化，但是变化无法主动带动更新，所以选择状态。

• 又因为需要在页面加载出来时就开始更新时间，直到页面销毁，useEffect（）会在页面加载时被调用，其中的return会在销毁时调用，所以加载变化逻辑可以写在里面 结束写在return的匿名函数体内。
• 且最小变化单位为秒，所以循环定时时间设为1000ms
• 拿到时间用dayjs

1. 标签显示的为状态变量值{state}
2. const [ state, setState ] = useState (‘初值’)
3. useEffect（ （）=>{
   setInterval（（）=>{
   …
   }，1000）
   }）

效果