react hooks定时器，值增1

使用函数式更新的方法实现定时器的代码：
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const timer = setInterval(() => {
      // 使用函数式更新，接收先前的state，并返回一个更新后的值
      setCount(prevCount => prevCount + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

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

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

使用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;
使用useReducer的方法：useReducer可以接收一个reducer函数和一个初始状态，并返回一个状态和一个分发函数。reducer函数是一个纯函数，它根据传入的action来更新状态，并返回一个新的状态。我们可以使用useReducer来定义一个计数器的reducer函数，该函数根据不同的action类型来增加或重置计数。我们也可以在useEffect中分发一个增加计数的action，从而触发reducer函数更新状态。以下是使用useReducer的方法的代码：
import React, { useReducer, useEffect } from 'react';

// 定义一个计数器的reducer函数，根据不同的action类型来增加或重置计数
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'reset':
      return 0;
    default:
      return state;
  }
}

function App() {
  const [count, dispatch] = useReducer(counterReducer, 0); // 使用useReducer，传入reducer函数和初始状态

  useEffect(() => {
    const timer = setInterval(() => {
      // 分发一个增加计数的action，触发reducer函数更新状态
      dispatch({ type: 'increment' });
    }, 1000);
    return () => clearInterval(timer); // 清理函数中清除定时器
  }, []);

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

export default App;
使用自定义hook的方法：自定义hook是一种复用逻辑的方式，它可以使用其他内置的hook，并返回一些值或函数。我们可以创建一个自定义hook，用于封装定时器的逻辑，并返回一个计数值和一个重置函数。我们可以在组件中调用这个自定义hook，并将计数值渲染到页面上。以下是使用自定义hook的方法的代码：
import React, { useState, useEffect } from 'react';

// 创建一个自定义hook，用于封装定时器的逻辑
function useTimer(initialValue) {
  const [count, setCount] = useState(initialValue); // 定义一个状态变量和一个更新函数

  useEffect(() => {
    const timer = setInterval(() => {
      // 使用setCount更新状态
      setCount(prevCount => prevCount + 1);
    }, 1000);
    return () => clearInterval(timer); // 清理函数中清除定时器
  }, []);

  // 定义一个重置函数，用于将计数值重置为初始值
  function reset() {
    setCount(initialValue);
  }

  // 返回一个计数值和一个重置函数
  return [count, reset];
}

function App() {
  const [count, reset] = useTimer(0); // 调用自定义hook，传入初始值

  return (
    <div className="App">
      <h1>React Hooks 定时器</h1>
      <p>当前计数：{count}</p>
      <button onClick={reset}>重置</button>
    </div>
  );
}

export default App;