在umi react 纯函数组件中 使用组件 Statistic value 值 进入该页面时 组件 value 默认1024 每秒加1 离开页面计时器清除

可以使用useState和useEffect来实现计时器和页面进入离开的逻辑。

首先在组件中定义一个state来存储value的值和一个计时器变量：

const [value, setValue] = useState(1024);
let timer;

然后在进入页面时启动计时器，每秒更新value值：

useEffect(() => {
  timer = setInterval(() => {
    setValue(prevValue => prevValue + 1);
  }, 1000);
  return () => clearInterval(timer);
}, []);

在离开页面时清除计时器：

useEffect(() => {
  return () => clearInterval(timer);
}, []);

完整代码：

import React, { useState, useEffect } from 'react';
import { Statistic } from 'antd';

const MyComponent = () => {
  const [value, setValue] = useState(1024);
  let timer;

  useEffect(() => {
    timer = setInterval(() => {
      setValue(prevValue => prevValue + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    return () => clearInterval(timer);
  }, []);

  return (
    <Statistic title="Value" value={value} />
  );
};

export default MyComponent;