在不使用 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));
}, []);