如何hook实现一个定时器

useState

首先展示一个简单的例子，使用useEffect和useState来创建一个简单的计数器组件：

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

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    // 清理函数，在组件卸载或者定时器更新前被调用
    return () => clearInterval(intervalId);
  }, []); // 传入空数组作为依赖项确保只在组件挂载时运行一次

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
}

export default Timer;

这段代码使用了useState和useEffect两个react hook。useState用于定义一个状态变量count和一个更新函数setCount。
useEffect用于在组件挂载后执行一个副作用函数，该函数中创建了一个定时器，每隔一秒调用setCount函数，并传入一个函数作为参数。
这个函数接收先前的count值，并返回一个加一后的值。这样就可以保证定时器每次拿到的是最新的count值，而不是初始值

useRef

使用useRef的方法：useRef可以创建一个可变的引用对象，该对象的current属性可以存储任何值，
并且在组件重新渲染时不会改变。我们可以使用useRef来存储定时器的id，以便在清理函数中清除定时器。
我们也可以使用useRef来存储count的当前值，并在定时器中更新它。这样就可以避免使用state和set函数，从而减少组件的渲染次数。以下是使用useRef的方法的代码：

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

function App() {
  const timerRef = useRef(null); // 创建一个引用对象，用于存储定时器的id
  const countRef = useRef(0); // 创建一个引用对象，用于存储count的当前值

  useEffect(() => {
    timerRef.current = setInterval(() => {
      // 直接更新countRef.current的值，而不使用state和set函数
      countRef.current = countRef.current + 1;
    }, 1000);
    return () => clearInterval(timerRef.current); // 清理函数中清除定时器
  }, []);

  return (
    <div className="App">
      <h1>React Hooks 定时器</h1>
      <p>当前计数：{countRef.current}</p>
    </div>
  );
}
export default App;