「React」React Hooks与setInterval的踩坑问题总结

一、需求

我们希望有一个每一秒自动+1的定时器

function Counter() {
  let [count, setCount] = useState(0);
  useEffect(() => {
    let id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, [count]);
  return <h1>{count}</h1>;
} 

这种写法你会发现页面效果确实能出来，但是性能很差。每当 count 更改了， useEffect 就会渲染一次,定时器也会不停的被新增与移除。过程如下：

//第一次
function Counter() {
//... 
useEffect(() => {
    let id = setInterval(() => {
      setCount(0 + 1);
    }, 1000);
    return () => clearInterval(id);
  }, [0]);
//...
}
//第二次
function Counter() {
//... 
useEffect(() => {
    let id = setInterval(() => {
      setCount(1 + 1);
    }, 1000);
    return () => clearInterval(id);
  }, [1]);
//...
//第N次
} 

现在我们的需求是在实现功能的基础上，还要使得定时器只监听一次,保障它的性能很高。

二、解决方案