关于react Hooks 的问题

Question

想问下我的代码哪里写的有问题，为什么num增加到10之后会出现抖动现象？

相关代码

import React, {useState} from 'react';

export default function Example() {
  const [num, setNum] = useState(0);
  setInterval(() => {
    setNum(num + 1)
  }, 1000);
  return (
    <div>
      <button>
        Click me{num}
      </button>
    </div>
  );
}

Answer 1

简单说就是每次 setNum 都会创建一个新的 timer，所以就抖动了，这里应该使用 React.useEffect 包装 setInterval。

这个文章看完应该会完美解决你的问题, making-setinterval-declarative-with-react-hooks，如果英语不好，里面有中文的链接。

Answer 2

你用过原来 class 的写法吗?
每次组件刷新都会调用 setInterval 而造成调用内存的指数上升

setInterval(() => {
    setNum(num + 1)
  }, 1000);

可以使用生命周期解决

useEffect(()=>{
  setInterval(() => {
    setNum(num + 1)
  }, 1000);
},[]) // 同 componentDidMount