react hooks页面实时刷新方式(setInterval)

function Index() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const timer = setInterval(() => {
    
    //可以调接口
    //可以存state，如setCount(count + 1)
    //可以调其他函数
 
    }, 1000);
    return () => clearInterval(timer);  //清除定时器不要忘记
  }, [count]);  //数组依赖不要忘记
 
  return <div>{count}</div>;
}

function Index() {
  const savecallback=useRef(null); //为了避免形成闭包
  function callback(){
    // 可以调其他函数
    // 可以调接口
  }
 
  /*每当组件被重新渲染，useEffect 都会将最新的回调函数赋值给 ref.current，接着 ref.current会被放到 setInterval 里去执行。所以 setInterval 虽只在组件初始化时被启动了一次，但它在执行每次定时任务时，使用的都是最新的回调函数。回调函数不再被困于闭包当中，最新的 state、props 自然能够被取到。*/
  
  useEffect(() => {
    (savecallback as any).current = callback;
  });
 
  useEffect(() => {
    const timer = setInterval(() => {
      (savecallback as any).current();
    }, 1000);
    return () => clearInterval(timer);
  }, []);
 
  return <div>页面</div>;
}

const intitstate= {count: 0};
 
function reducer(state = 0，action) {
  return {count: state.count + 1};
}
 
export default function Index() {
  const [state, dispatch] = useReducer(reducer,intitstate);
 
  useEffect(() => {
    setInterval(() => {
      dispatch();
    }, 1000);
  }, []);
 
  return <div>{state.count}</div>;
}