我打算实现一个显示当前时间的组件，于是用到了setInterval

import moment from 'moment';
import React, { useEffect, useState } from 'react';

const ShowCurrentTime = ()=>{
  const formatting = 'YYYY年MM月DD日 HH:mm:ss'; // 格式化时间
  const [currentTime, setTime] = useState(moment().format(formatting));
  const showCurrentTime =()=>setTime(() => moment().format(formatting));
  const delay=1000;
  useEffect(() => {
    if(delay !== null){
      const timer:NodeJS.Timeout = setInterval(() => {showCurrentTime()}, delay);
      return () => {
        if (timer) {
          clearInterval(timer); // 取消定时器；
        }
      }
    }
    return ()=>{}
  },[delay]);

  return <div>{currentTime}</div>;
};
export default ShowCurrentTime

上面的代码组件正常运行，但是有一点美中不足的是useEffct中写了定时器和业务代码，实际上可以进行一下抽离优化。把定时器抽离出来

import moment from 'moment';
import React, { useState } from 'react';

const useInterval=(callback:()=>void,delay:number)=>{
  const saveCallback = useRef(callback);
  useEffect(() => {
    saveCallback.current = callback;
  }, [callback]);
  useEffect(() => {
    if(delay !== null){
      const timer:NodeJS.Timeout = setInterval(() => saveCallback.current(), delay);
      return () => {
        if (timer) {
          clearInterval(timer); // 取消定时器；
        }
      }
    }
    return ()=>{}
  },[delay]);
};

const ShowCurrentTime = ()=>{
  const formatting = 'YYYY年MM月DD日 HH:mm:ss'; // 格式化时间
  const [currentTime, setTime] = useState(moment().format(formatting));
  const showCurrentTime =()=>setTime(() => moment().format(formatting));
  useInterval(showCurrentTime,1000);
  return <div>{currentTime}</div>;
};
export default ShowCurrentTime

嗯，这样就舒服很多！