React useEffect中使用定時器所產生的閉包陷阱

其實關於這個問題在知乎和百度上都有提及，但是在掘金上卻沒有詳細的文章，因此準備出一篇文章來解決在useEffect中如何使用定時器。有一篇文章寫得特別好，如果大家想深入理解可以點選此連結使用 React Hooks 宣告 setInterval

眉頭一皺，發現問題並不簡單

首先讓我們做一個小Demo,設定一個名為value的state,並每隔5秒，產生一個隨機數，並讓value加上這個數

import React, { useState, useEffect } from 'react';
 
import './App.css';
 
 
function App() {
  const [value, setValue] = useState<number>(0);
  useEffect(() => {
    const timer: NodeJS.Timeout = setInterval(() => {
      const random = (Math.random() * 10) | 0;
 
      setValue(value + random);
    }, 5000);
 
    return () => {
      clearInterval(timer);
    };
  }, []);
  
 
return <div>{value}</div>;
}
 
export default App;

這裡看起來是實現了每隔5秒增加一次值，但

你以為的不是你以為的

如果我們在程式碼中加入一個定時器陣列，用來記錄你添加了多少個定時器

function App() {
  const [value, setValue] = useState<number>(0);
  const [timers, setTimers] = useState<Array<NodeJS.Timeout>>([]);
  useEffect(() => {
    const timer: NodeJS.Timeout 
 
= setInterval(() => {
      const random = (Math.random() * 10) | 0;
      setValue(value + random);
    }, 5000);
    timers.push(timer);
    setTimers(timers);
    console.log(timers);
    return () => {
      clearInterval(timer);
    };
  }, [value]);
  return <div>{value}</div>;
}

你會驚訝的發現你不僅value發生變化了，而且又多生成了一個定時器。如下圖所示。

這對於瀏覽器效能來說是絕對不可以接受的，那這是為什麼產生的呢，產生的原因是因為useEffect 在第一次渲染時獲取值為 0 的 value，將不再次執行 effect，所以 setInterval 一直引用第一次渲染時的閉包 value，因此每次都是在0的基礎上新增一個隨機數，而不是依次累加，最關鍵的是如果你開啟了Vscode的eslint外掛，它還會給你自動補齊依賴項， 這裡推薦一篇關於react-hooks閉包問題的文章陳舊閉包問題,解釋的比較清楚。

問題不大

為了解決這個問題，我們需要引入react中另外一個hook ,useRef。useRef 返回一個可變的 ref 物件，其 .current 屬性被初始化為傳入的引數（initialValue）。返回的 ref 物件在元件的整個生命週期內保持不變，利用這個特性，我們把它用在我們的demo中看看效果

function App() {
  const [value, setValue] = useState<number>(0);
  const [timers, setTimers] = useState<Array<NodeJS.Timeout>>([]);
  const saveCallBack: any = useRef();
  const callBack = () => {
    const random: number = (Math.random() * 10) | 0;
    setValue(value + random);
  };
  useEffect(() => {
    saveCallBack.current = callBack;
    return () => {};
  });
  useEffect(() => {
    const tick = () => {
      saveCallBack.current();
    };
    const timer: NodeJS.Timeout = setInterval(tick, 5000);
    timers.push(timer);
    setTimers(timers);
    console.log(timers);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return <div>{value}</div>;
}

使用了useRef後，定時器不會被重複建立，但是value的值變成了依次累加，達到了預期的效果，真是讓人神清氣爽，so cool!

原文連結：https://juejin.im/post/5e8540a1f265da47c8011d29