通過 React Hooks 聲明式地使用 setInterval

本文由雲+社區發表
作者：Dan Abramov

接觸 React Hooks 一定時間的你，也許會碰到一個神奇的問題: setInterval 用起來沒你想的簡單。

Ryan Florence 在他的推文裏面說到：

不少朋友跟我提起，setInterval 和 hooks 一起用的時候，有種蛋蛋的憂傷。

老實說，這些朋友也不是胡扯。剛開始接觸 Hooks 的時候，確實還挺讓人疑惑的。

但我認爲談不上 Hooks 的毛病，而是 React 編程模型和 setInterval 之間的一種模式差異。相比類（Class），Hooks 更貼近 React 編程模型，使得這種差異更加突出。

雖然有點繞，但是讓兩者和諧相處的方法，還是有的。

本文就來探索一下，如何讓 setInterval 和 Hooks 和諧地玩耍，爲什麼是這種方式，以及這種方式給你帶來了什麼新能力。

聲明：本文采用循序漸進的示例來解釋問題。所以有一些示例雖然看起來可以有捷徑可走，但是我們還是一步步來。

如果你是 Hooks 新手，不太明白我在糾結啥，不妨讀一下 React Hooks 的介紹和官方文檔。本文假設讀者已經使用 Hooks 超過一個小時。

代碼呢？

通過下面的方式，我們可以輕鬆地實現一個每秒自增的計數器：

import React, { useState, useEffect, useRef } from 'react';

function Counter() {
  let [count, setCount] = useState(0);

  useInterval(() => {
    // Your custom logic here
    setCount(count + 1);
  }, 1000);

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

（CodeSandbox 線上示例）

上述 useInterval 並不是內置的 React Hook，而是我實現的一個自定義 Hook：

import React, { useState, useEffect, useRef } from 'react';

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  });

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

（如果你在錯過了，這裏也有一個一樣的 CodeSandbox 線上示例）

我實現的 useInterval Hook 設置了一個計時器，並且在組件 unmount 的時候清理掉了。 這是通過組件生命週期上綁定 setInterval 與 clearInterval 的組合完成的。

這是一份可以在項目中隨意複製粘貼的實現，你甚至可以發佈到 NPM 上。

不關心爲什麼這樣實現的讀者，就不用繼續閱讀了。下面的內容是爲希望深入理解 React Hooks 的讀者而準備的。

哈？！ 🤔

我知道你想什麼：

Dan，這代碼不對勁。說好的“純粹 JavaScript”呢？React Hooks 打了 React 哲學的臉？

哈，我一開始也是這麼想的，但是後來我改觀了，現在，我準備也改變你的想法。開始之前，我先介紹下這份實現的能力。

爲什麼 `useInterval()` 是一個更合理的 API？

注意下，useInterval Hook 接收一個函數和一個延時作爲參數：

  useInterval(() => {
    // ...
  }, 1000);

這個跟原生的 setInterval 非常的相似：

  setInterval(() => {
    // ...
  }, 1000);

那爲啥不乾脆使用 setInterval 呢？

setInterval 和 useInterval Hook 最大的區別在於，useInterval Hook 的參數是“動態的”。乍眼一看，可能不是那麼明顯。

我將通過一個實際的例子來說明這個問題：

如果我們希望 interval 的間隔是可調的：

一個延時可輸入的計時器

此時無需手動控制延時，直接動態調整 Hooks 參數就行了。比方說，我們可以在用戶切換到另一個選項卡時，降低 AJAX 更新數據的頻率。

如果按照類（Class）的方式，怎麼通過 setInterval 實現上述需求呢？我折騰出這個：

class Counter extends React.Component {
  state = {
    count: 0,
    delay: 1000,
  };

  componentDidMount() {
    this.interval = setInterval(this.tick, this.state.delay);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.delay !== this.state.delay) {
      clearInterval(this.interval);
      this.interval = setInterval(this.tick, this.state.delay);
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  tick = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  handleDelayChange = (e) => {
    this.setState({ delay: Number(e.target.value) });
  }

  render() {
    return (
      <>
        <h1>{this.state.count}</h1>
        <input value={this.state.delay} onChange={this.handleDelayChange} />
      </>
    );
  }
}

(CodeSandbox 在線示例)

太熟悉了！

那改成使用 Hooks 怎麼實現呢？

🥁🥁🥁表演開始了！

function Counter() {
  let [count, setCount] = useState(0);
  let [delay, setDelay] = useState(1000);

  useInterval(() => {
    // Your custom logic here
    setCount(count + 1);
  }, delay);

  function handleDelayChange(e) {
    setDelay(Number(e.target.value));
  }

  return (
    <>
      <h1>{count}</h1>
      <input value={delay} onChange={handleDelayChange} />
    </>
  );
}

(CodeSandbox 線上示例)

沒了，就這麼多！

不用於 class 實現的版本，useInterval Hook “升級到”支持到支持動態調整延時的版本，沒有增加任何複雜度。

使用 useInterval 新增動態延時能力，幾乎沒有增加任何複雜度。這個優勢是使用 class 無法比擬的。

// 固定延時
useInterval(() => {
  setCount(count + 1);
}, 1000);

// 動態延時
useInterval(() => {
  setCount(count + 1);
}, delay);

當 useInterval 接收到另一個 delay 的時候，它就會重新設置計時器。

我們並沒有通過執行代碼來設置或者清理計時器，而是聲明瞭具有特定延時的計時器 - 這是我們實現的 useInterval 的根本原因。

如果想臨時暫停計時器呢？我可以這樣來：

const [delay, setDelay] = useState(1000);
const [isRunning, setIsRunning] = useState(true);

useInterval(() => {
  setCount(count + 1);
}, isRunning ? delay : null);

(線上示例)

這就是 Hooks 和 React 再一次讓我興奮的原因。我們可以把原有的調用式 API，包裝成聲明式 API，從而更加貼切地表達我們的意圖。就跟渲染一樣，我們可以描述當前時間每個點的狀態，而無需小心翼翼地通過具體的命令來操作它們。

到這裏，我希望你已經確信 useInterval Hook 是一個更好的 API - 至少在組件層面使用的時候是這樣。

可是爲什麼在 Hooks 裏使用 setInterval 和 clearInterval 這麼讓人惱火？ 回到剛開始的計時器例子，我們嘗試手動去實現它。

第一次

最簡單的，渲染初始狀態:

function Counter() {
  const [count, setCount] = useState(0);
  return <h1>{count}</h1>;
}

現在我希望它每秒定時更新。我準備使用 useEffect() 並且返回一個清理方法，因爲它是一個需要清理的 Side Effect：

function Counter() {
  let [count, setCount] = useState(0);

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

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

(查看 CodeSandbox 線上示例)

看起來很簡單？

然而，這段代碼有個詭異的行爲。

React 默認會在每次渲染時，都重新執行 effects。這是符合預期的，這機制規避了早期在 React Class 組件中存在的一系列問題。

通常來說，這是一個好特性，因爲大部分的訂閱 API 都允許移除舊的訂閱並添加一個新的訂閱來替換。但是，這不包括 setInterval。調用了 clearInterval 後重新 setInterval 的時候，計時會被重置。如果我們頻繁重新渲染，導致 effects 頻繁執行，計時器可能根本沒有機會被觸發！

通過使用在一個更小的時間間隔重新渲染我們的組件，可以重現這個 BUG：

setInterval(() => {
  // 重新渲染導致的 effect 重新執行會讓計時器在調用之前，
  // 就被 clearInterval() 清理掉，之後 setInterval()
  // 重新設置的計時器，會重新開始計時
  ReactDOM.render(<Counter />, rootElement);
}, 100);

(查看這個 BUG 的線上示例)

第二次

部分讀者可能知道，useEffect 允許我們控制重新執行的實際。通過在第二個參數指定依賴數組，React 就會只在這個依賴數組變更的時候重新執行 effect。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

如果我們希望 effect 只在組件 mount 的時候執行，並且在 unmount 的時候清理，我們可以傳遞空數組 [] 作爲依賴。

但是！不是特別熟悉 JavaScript 閉包的讀者，很可能會犯一個共性錯誤。我來示範一下！（我們在設計 lint 規則來幫助定位此類錯誤，不過現在還沒有準備好。）

第一次的問題在於，effect 的重新執行導致計時器太早被清理掉了。如果不重新執行它們，也許可以解決這個問題：

function Counter() {
  let [count, setCount] = useState(0);

  useEffect(() => {
    let id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

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

如果這樣實現，計時器更新到 1 之後，就停止不動了。(查看這個 BUG 的線上示例)

發生了啥？

問題在於，useEffect 使用的 count 是在第一次渲染的時候獲取的。 獲取的時候，它就是 0。由於一直沒有重新執行 effect，所以 setInterval 在閉包中使用的 count 始終是從第一次渲染時來的，所以就有了 count + 1 始終是 1 的現象。呵呵噠！

我感覺你已經開始懟天懟地了。Hooks 是什麼鬼嘛！

解決這個問題的一個方案，是把 setCount(count + 1) 替換成“更新回調”的方式 setCount(c => c + 1)。從回調參數中，可以獲取到最新的狀態。此非萬全之策，新的 props 就無法讀取到。

另一個解決方案是使用 useReducer()。此方案更爲靈活。在 reducer 內部，可以訪問當前的狀態，以及最新的 props。dispatch 方法本身不會改變，所以你可以在閉包裏往裏面灌任何數據。使用 useReducer() 的一個限制是，你不能在內部觸發 effects。（不過，你是可以通過返回一個新 state 來觸發一些 effect）。

爲何如此艱難？

阻抗不匹配

這個術語（譯者注：術語原文爲 "Impedance Mismatch"）在很多地方被大家使用，Phil Haack 是這樣解釋的：

有人說數據庫來自火星，對象來自金星。數據庫不能天然的和對象模型建立映射關係。這就像嘗試將兩塊磁鐵的 N 極擠在一起一樣。

我們此處的“阻抗不匹配”，說的不是數據庫和對象。而是 React 編程模型，與命令式的 setInterval API 之間的不匹配。

一個 React 組件可能會被 mount 一段時間，並且經歷多個不同的狀態，不過它的 render 結果一次性地描述了所有這些狀態

// 描述了每一次渲染的狀態
return <h1>{count}</h1>

同理，Hooks 讓我們聲明式地使用一些 effect：

// 描述每一個計數器的狀態
useInterval(() => {
  setCount(count + 1);
}, isRunning ? delay : null);

我們不需要去設置計時器，但是指明瞭它是否應該被設置，以及設置的間隔是多少。我們事先的 Hook 就是這麼做的。通過離散的聲明，我們描述了一個連續的過程。

相對應的，setInterval 卻沒有描述到整個過程 - 一旦你設置了計時器，它就無法改變了，只能清除它。

這就是 React 模型和 setInterval API 之間的“阻抗不匹配”。

React 組件的 props 和 state 會變化時，都會被重新渲染，並且把之前的渲染結果“忘記”的一乾二淨。兩次渲染之間，是互不相干的。

useEffect() Hook 同樣會“遺忘”之前的結果。它清理上一個 effect 並且設置新的 effect。新的 effect 獲取到了新的 props 和 state。所以我們第一次的事先在某些簡單的情況下，是可以執行的。

但是 setInterval() 不會 “忘記”。 它會一直引用着舊的 props 和 state，除非把它換了。但是隻要把它換了，就沒法不重新設置時間了。

等會，真的不能嗎?

Refs 是救星!

先把問題整理下：

第一次渲染的時候，使用 callback1 進行 setInterval(callback1, delay)
下一次渲染的時候，使用 callback2 可以訪問到新的 props 和 state
我們無法用 callback2 替換掉 callback1 但是又不重設計時器

如果我們壓根不替換計時器，而是傳入一個 savedCallback 變量，始終指向最新的計時器回調呢？？

現在我們的方案看起來是這樣的：

設置計時器 setInterval(fn, delay)，其中 fn 調用 savedCallback。
第一次渲染，設置 savedCallback 爲 callback1
第二次渲染，設置 savedCallback 爲 callback2
???
行了

可變的 savedCallback 需要在多次渲染之間“持久化”，所以不能使用常規變量。我們需要像類似實例字段的手段。

從 Hooks 的 FAQ 中，我們得知 useRef() 可以幫我們做到這點：

const savedCallback = useRef();
// { current: null }

（你可能已經對 React 的 DOM refs 比較熟悉了。Hooks 引用了相同的概念，用於持有任意可變的值。一個 ref 就行一個“盒子”，可以放東西進去。）

useRef() 返回了一個字面量，持有一個可變的 current 屬性，在每一次渲染之間共享。我們可以把最新的計時器回調保存進去。

function callback() {
  // 可以讀取到最新的 state 和 props
  setCount(count + 1);
}

// 每次渲染，保存最新的回調到 ref 中
useEffect(() => {
  savedCallback.current = callback;
});

後續就可以在計時器回調中調用它了：

useEffect(() => {
  function tick() {
    savedCallback.current();
  }

  let id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

由於傳入了 []，我們的 effect 不會重新執行，所以計時器不會被重置。另一方面，由於設置了 savedCallback ref，我們可以獲取到最後一次渲染時設置的回調，然後在計時器觸發時調用。

再看一遍完整的實現：

function Counter() {
  const [count, setCount] = useState(0);
  const savedCallback = useRef();

  function callback() {
    setCount(count + 1);
  }

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

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

(查看 CodeSandbox 線上示例)

提取爲自定義 Hook

不得不承認，上面的代碼有點迷。各種花裏胡哨的操作讓人費解不說，還有可能讓 state 和 refs 與其它邏輯裏的搞混。

我認爲，雖然 Hooks 相比 Class 提供了更底層的能力 - 不過 Hooks 的牛逼在於允許我們重組、抽象後創造出聲明語意更優的 Hooks

事實上，我就想這樣來寫：

function Counter() {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

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

於是我把我的實現核心拷貝到自定義 Hook 中：

function useInterval(callback) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
}

延時值 1000 是硬編碼的，把它參數化：

function useInterval(callback, delay) {

在設置計時器的時候使用：

let id = setInterval(tick, delay);

現在 delay 可能在多次渲染之間變更，我需要把它聲明爲計時器 effect 的依賴：

useEffect(() => {
  function tick() {
    savedCallback.current();
  }

  let id = setInterval(tick, delay);
  return () => clearInterval(id);
}, [delay]);

慢着，我們之前不是爲了避免計時器重設，才傳入了一個 [] 的嗎？不完全是。我們只是希望 Hooks 不要在 callback 變更的重新執行。如果 delay 變更了，我們是想要重新啓動計時器的。

現在來看下我們的代碼是不是能跑：

function Counter() {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

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

function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, delay);
    return () => clearInterval(id);
  }, [delay]);
}

(讀者可以在 CodeSandbox 上試一下)

棒棒的！現在，我們可以無需關注實現細節，在任何組件裏面需要的時候，直接使用 useInterval() 了。

Bonus: 暫停計時器

我們希望在給 delay 傳 null 的時候暫停計時器：

const [delay, setDelay] = useState(1000);
const [isRunning, setIsRunning] = useState(true);

useInterval(() => {
  setCount(count + 1);
}, isRunning ? delay : null);

怎麼實現？簡單：不設置計時器就可以了。

useEffect(() => {
  function tick() {
    savedCallback.current();
  }

  if (delay !== null) {
    let id = setInterval(tick, delay);
    return () => clearInterval(id);
  }
}, [delay]);

(CodeSandbox 線上示例)

就這樣了。這段代碼可以處理各種可能的變更了：延時值改變、暫停和繼續。雖然 useEffect() API 需要我們前期花更多的精力進行設置和清理工作，添加新能力卻是輕鬆了。

Bonus: 有趣的 Demo

這個 useInterval() Hook 其實很好玩。現在 side effects 是聲明式的，所以組合使用變得輕鬆多了。

比方說，我們可以使用一個計時器來控制另一個計時器的 delay：

自動加速的計時器

function Counter() {
  const [delay, setDelay] = useState(1000);
  const [count, setCount] = useState(0);

  // Increment the counter.
  useInterval(() => {
    setCount(count + 1);
  }, delay);

  // Make it faster every second!
  useInterval(() => {
    if (delay > 10) {
      setDelay(delay / 2);
    }
  }, 1000);

  function handleReset() {
    setDelay(1000);
  }

  return (
    <>
      <h1>Counter: {count}</h1>
      <h4>Delay: {delay}</h4>
      <button onClick={handleReset}>
        Reset delay
      </button>
    </>
  );
}

(CodeSandbox 線上示例)

總結

Hooks 需要我們慢慢適應 - 尤其是在面對命令式和聲明式代碼的區別時。你可以創造出像 React Spring 一樣強大的聲明式抽象，但是他們複雜的用法偶爾會讓你緊張。

Hooks 還很年輕，還有很多我們可以研究和對比的模式。如果你習慣於按照“最佳實踐”來的話，大可不必着急使用 Hooks。社區還需時間來嘗試和挖掘更多的內容。

使用 Hooks 的時候，涉及到類似 setInterval() 的 API，會碰到一些問題。閱讀本文後，希望讀者能夠理解並且解決它們，同時，通過創建更加語義化的聲明式 API，享受其帶來的好處。

此文已由騰訊雲+社區在各渠道發佈

獲取更多新鮮技術乾貨，可以關注我們騰訊雲技術社區-雲加社區官方號及知乎機構號

通過 React Hooks 聲明式地使用 setInterval

代碼呢？

哈？！ 🤔

爲什麼 `useInterval()` 是一個更合理的 API？

第一次

第二次

阻抗不匹配

Refs 是救星!

提取爲自定義 Hook

Bonus: 暫停計時器

Bonus: 有趣的 Demo

總結

System.Object未被引用的程序集中定義

【面試準備】項目經驗——接口自動化項目

【報名中】【5G探索】深度揭祕5G核心技術與挑戰，雲+社區開發者大會北京站等你來！

【沙龍報名中】騰訊雲聯手多家科技企業，共探雲開發應用實踐

【沙龍報名中】集結騰訊技術專家，共探AI技術原理與實踐

【活動公告】Hackathon —— 騰訊雲AI API接入迷你賽

【沙龍報名中】與微信&雲開發官方團隊零距離互動，揭祕爆款微信小遊戲背後的技術！

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

通過 React Hooks 聲明式地使用 setInterval

代碼呢？

哈？！ 🤔

爲什麼 useInterval() 是一個更合理的 API？

第一次

第二次

阻抗不匹配

Refs 是救星!

提取爲自定義 Hook

Bonus: 暫停計時器

Bonus: 有趣的 Demo

總結

爲什麼 `useInterval()` 是一個更合理的 API？