在不使用 useEffect 鈎子的情況下啟動計時器間隔

Question

我想在不使用 useEffect 鈎子的情況下在 react native 中啟動一個計時器間隔，在 y 的情況下，我想在承諾解析時啟動一個計時器並每秒更改一個狀態變量，如何在不使用 useEffect 鈎子的情況下執行此操作？

我試過這個：

useEffect(
  () => {
    const id = setInterval(() => {
        
     setCounter(counter+1)
    
    }, 1000);
    return () => {
      clearInterval(id);
    };
  },
  [] // empty dependency array
);

雖然它有效，但我需要啟動計時器從正常函數而不是鈎子調用它。

Answer 1

任何副作用（包括啟動一個定時器）都不應該屬於組件函數的主體。 相反，最好將這些事情委托給useEffect()鈎子。

如果我正確理解了您的問題，您仍然可以在鈎子中啟動該計時器，只需調用內部的普通函數即可。

例如，如果您的普通函數已經返回一個函數來清理自己，那么它可以是這么簡單：

useEffect(() => startTimer(setCounterCallback), [])

哦，如果計划是在 promise 解決后啟動它，也可以將該異步函數包裝在同一個useEffect() ：

useEffect(() => {
  const promise = Promise.resolve();
  promise.then(() => startTimer(setCounterCallback));
}, []);