如何在react组件加定时器

使用useEffect和setTimeout

在React函数组件中，可以通过useEffect钩子和setTimeout实现定时器功能。组件卸载时需要清除定时器以避免内存泄漏。

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

function TimerComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearTimeout(timer);
  }, [count]);

  return <div>Count: {count}</div>;
}

使用useEffect和setInterval

对于需要重复执行的定时任务，setInterval比setTimeout更合适。同样需要注意在useEffect的清理函数中清除定时器。

function IntervalComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Count: {count}</div>;
}

使用自定义Hook封装定时器逻辑

将定时器逻辑封装成自定义Hook可以提高代码复用性。创建一个返回当前计数和清除定时器函数的Hook。

function useTimer(initialState = 0, delay = 1000) {
  const [count, setCount] = useState(initialState);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1);
    }, delay);

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

  return count;
}

function CustomHookComponent() {
  const count = useTimer(0, 500);
  return <div>Custom Hook Count: {count}</div>;
}

类组件中的定时器实现

在类组件中，可以在componentDidMount生命周期方法中设置定时器，并在componentWillUnmount中清除。

class ClassTimer extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState(prevState => ({
        count: prevState.count + 1
      }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <div>Class Count: {this.state.count}</div>;
  }
}

动态调整定时器间隔

通过将定时器间隔作为依赖项传递给useEffect，可以实现动态调整定时器速度。当间隔参数变化时，会先清除旧定时器再创建新定时器。

function DynamicInterval({ delay }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prev => prev + 1);
    }, delay);

    return () => clearInterval(interval);
  }, [delay]);

  return <div>Dynamic Count: {count}</div>;
}

使用第三方库

对于更复杂的定时器需求，可以考虑使用专门的时间管理库如react-timer-hook。这些库提供了更多功能和更好的性能优化。

import { useTimer } from 'react-timer-hook';

function ThirdPartyTimer({ expiryTimestamp }) {
  const {
    seconds,
    minutes,
    hours,
    days,
    isRunning,
    start,
    pause,
    resume,
    restart,
  } = useTimer({ expiryTimestamp, onExpire: () => console.log('Timer expired') });

  return (
    <div>
      <div>Timer: {days}d {hours}h {minutes}m {seconds}s</div>
      {isRunning ? (
        <button onClick={pause}>Pause</button>
      ) : (
        <button onClick={resume}>Resume</button>
      )}
      <button onClick={() => {
        const time = new Date();
        time.setSeconds(time.getSeconds() + 300);
        restart(time)
      }}>Restart</button>
    </div>
  );
}