useTimeout 是可以在函数式组件中，处理 setTimeout 计时器函数

解决了什么问题？

如果直接在函数式组件中使用 setTimeout ，会遇到以下问题：

• 多次调用setTimeout

复制
1 function App() {  
2    const [state, setState] = useState(1);  
3    setTimeout(() => {  
4        setState(state + 1);  
5    }, 3000);  
6    return (  
7        // 我们原本的目的是在页面渲染完3s后修改一下state，但是你会发现当state+1后，触发了页面的重新渲染，就会重新有一个3s的定时器出现来给state+1，既而变成了每3秒+1。  
8        <div> {state} </div>  
9    );  
10  }; 

• hooks 的闭包缺陷

复制
1function App() {  
2  const [count, setCount] = useState(0)  
3  const [countTimeout, setCountTimeout] = useState(0)  
4  useEffect(() => {  
5      setTimeout(() => {  
6          setCountTimeout(count)  
7      }, 3000)  
8      setCount(5)  
9  }, [])  
10  return (  
11       //count发生了变化，但是3s后setTimout的count却还是0  
12      <div>  
13          Count: {count}  
14          <br />  
15          setTimeout Count: {countTimeout}  
16      </div>  
17  )  
18}

useTimeout 实现

复制
1function useTimeout(callback, delay) {
2  const memorizeCallback = useRef();
3
4  useEffect(() => {
5    memorizeCallback.current = callback;
6  }, [callback]);
7
8  useEffect(() => {
9    if (delay !== null) {
10      const timer = setTimeout(() => {
11        memorizeCallback.current();
12      }, delay);
13      return () => {
14        clearTimeout(timer);
15      };
16    }
17  }, [delay]);
18};

如何使用

复制
1  // callback 回调函数， delay 延迟时间
2  useTimeout(callback, delay);