React:实现一个定时器计数器，每秒自动+1

需求：实现一个定时器计数器，每秒自动+1

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

export default function App() {
  let [count, setCount] = useState(0);

  useEffect(() => {
    let timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);

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

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

以上写法有一个问题，页面会永远停留在数字1，并不会发生变化

正确的写法如下

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

export default function App() {
  let [count, setCount] = useState(0);

  useEffect(() => {
    let timer = setInterval(() => {
      setCount((preValue) => {
        return preValue + 1;
      });
    }, 1000);

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

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

方法签名

setCount(value)

setCount(preValue=>newValue)

参考文章

1. 「React」React Hooks与setInterval的踩坑问题总结
2. https://react.docschina.org/reference/react/useState