增加计数器，然后在达到一定限制时重置它

Question

我刚开始学习 React，我有一个关于性能的问题。我想使用 setInterval 函数增加一个计数器，然后在达到数组长度时将其重置。问题是我需要为 useEffect 依赖项添加一个 active 变量，它会删除间隔然后再次创建它。

useEffect(() => {
     const timer = setInterval(() => {
        active == arr.length - 1 ? setActive(0) : setActive((active) => active + 1)
     }, 3000)
     return () => clearInterval(timer)
}, [active])

所以，我写了这样的代码，看起来很疯狂，但在不删除间隔的情况下完成了同样的工作，并从回调中获取 active 变量的实际版本。

useEffect(() => {
     const timer = setInterval(() => {
        setActive((active) => (active === arr.length - 1 ? active == 0 : active + 1))
     }, 3000)
     return () => clearInterval(timer)
}, [])

问题是如何最好地编写而不是在组件中做不必要的工作

Answer 1

我可能会将所有这些逻辑拆分成几个效果。

管理间隔递增 active 并在组件卸载时清除间隔。

useEffect(() => {
  const timer = setInterval(() => {
    setActive(active => active + 1);
  }, 3000);

  return () => clearInterval(timer);
}, []);

重置条件状态需要一秒钟。

useEffect(() => {
  if (active === arr.length - 1) {
    setActive(0);
  }
}, [active, arr]);

我还要提醒您防止 active 更新为 0 并且 arr 数组是长度为 1 的数组的边缘情况，因为这将触发渲染循环。

增加计数器，然后在达到一定限制时重置它

Increase the counter, then reset it when a certain limit is reached

reactjs

react-hooks

use-effect