如何正确搭配使用 useEffect 与 setInterval()

先说一下useEffect的return回调,会在当前useEffect执行完毕后return一次。这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。

背景useEffect 看似很简单,其实不然。由于没有理解 useEffect 的工作原理,我被狠狠坑了一回。

事情是这样的:我想实现一个很简单的“物体下落”效果:

物体的垂直位置用 positionY 这个 state 来表示,从上往下计算, positionY 越大就离屏幕顶端越远;设置一个 setInterval,每隔一小段时间(30 ms)就增加 positionY,然后基于 positionY渲染物体,从而实现“物体下落”的效果;看似非常简单,但遇到了意想不到的困难!

失败的尝试我想,既然 setInterval 中的函数每隔一段时间就会触发,那么 setInterval 显然只需要运行一次就可以了!

众所周知,只运行一次函数的方式就是使用第二个参数为空数组的 useEffect 钩子。于是我写出了下面这个版本的代码:

function App() {
  const [positionY, setPositionY] = useState(0)

  useEffect(() => {
    timer = setInterval(() => {
      // 落到屏幕下方时停止下落
      if (positionY < WINDOW_HEIGHT) {
        setPositionY(positionY + 5)
      }
    }, 30)
    
    return () => {
        clearInterval(timer);
    };
  }, []);

  return (
      // 略
}

结果一运行我就傻了:物体根本没在动!准确地说,只是微微动了一下,之后就一直静止不懂了

哪里出错了?为什么上面那样写会失败?后来终于找到了原因:

第一次运行 App() 时,useEffect 被运行,设置了 setInterval,并且 setInterval 也的确触发了 setPositionY(positionY + 5),因此物体才会有最开始的“微微一动”;但当 positionY 更新之后,React 会用更新之后的 state 重新调用 App() ,但这次 useEffect 中的函数就不会运行了;所导致的结果就是:setInterval 中的函数拿到的始终都是 positionY 的初始值。

为什么会这样?因为 setInterval 是在第一次运行 App() 时被创建的,那个 App() 里的 positionY 从未改变。

更新之后的 positionY 的确被用来第二次运行 App() 了,但第二次运行 App() 又不会运行 setInterval 了。

真是意想不到啊!

正确写法至少有两种正确写法,示例如下。

方法一第一种方法是:

在每次 positionY 改变时都执行 useEffect,使用最新的 positionY 来创建一个新的 setInterval;与此同时,之前的 setInterval 会被自动清除,同时只会有一个 setInterval 计时器;示例如下:

function App() {
  const [positionY, setPositionY] = useState(0)

  useEffect(() => {
    timer = setInterval(() => {
      if (positionY < WINDOW_HEIGHT) {
        setPositionY(positionY + 5)
      }
    }, 30)
    
    return () => {
        // 每次执行新的 useEffect 时,之前的 useEffect 会被清理
        // 这个函数会被调用,从而清除之前的 setInterval 计时器
        clearInterval(timer);
    };
  }, [positionY]); // 这样保证了每次 positionY 改变时,useEffect 都会执行

  return (
      // 略
}

方法二

第二个方法是:

  • setState 可以接受一个函数,该函数的第一个参数即是最新的 state。通过这种方法可以确保拿到最新的 state;

示例如下:

function App() {
  const [positionY, setPositionY] = useState(0)

  useEffect(() => {
    timer = setInterval(() => {
      // 这样能保证拿到最新的 positionY
      setPositionY(oldVal => {
        if (oldVal < WINDOW_HEIGHT) {
          return oldVal + 5
        }
        return oldVal
      })
    }, 30)
    
    return () => {
        clearInterval(timer);
    };
  }, []); // 只需要执行一次 useEffect 即可

  return (
  	// 略
}
————————

先说一下useEffect的return回调,会在当前useEffect执行完毕后return一次。这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。

背景useEffect 看似很简单,其实不然。由于没有理解 useEffect 的工作原理,我被狠狠坑了一回。

事情是这样的:我想实现一个很简单的“物体下落”效果:

物体的垂直位置用 positionY 这个 state 来表示,从上往下计算, positionY 越大就离屏幕顶端越远;设置一个 setInterval,每隔一小段时间(30 ms)就增加 positionY,然后基于 positionY渲染物体,从而实现“物体下落”的效果;看似非常简单,但遇到了意想不到的困难!

失败的尝试我想,既然 setInterval 中的函数每隔一段时间就会触发,那么 setInterval 显然只需要运行一次就可以了!

众所周知,只运行一次函数的方式就是使用第二个参数为空数组的 useEffect 钩子。于是我写出了下面这个版本的代码:

function App() {
  const [positionY, setPositionY] = useState(0)

  useEffect(() => {
    timer = setInterval(() => {
      // 落到屏幕下方时停止下落
      if (positionY < WINDOW_HEIGHT) {
        setPositionY(positionY + 5)
      }
    }, 30)
    
    return () => {
        clearInterval(timer);
    };
  }, []);

  return (
      // 略
}

结果一运行我就傻了:物体根本没在动!准确地说,只是微微动了一下,之后就一直静止不懂了

哪里出错了?为什么上面那样写会失败?后来终于找到了原因:

第一次运行 App() 时,useEffect 被运行,设置了 setInterval,并且 setInterval 也的确触发了 setPositionY(positionY + 5),因此物体才会有最开始的“微微一动”;但当 positionY 更新之后,React 会用更新之后的 state 重新调用 App() ,但这次 useEffect 中的函数就不会运行了;所导致的结果就是:setInterval 中的函数拿到的始终都是 positionY 的初始值。

为什么会这样?因为 setInterval 是在第一次运行 App() 时被创建的,那个 App() 里的 positionY 从未改变。

更新之后的 positionY 的确被用来第二次运行 App() 了,但第二次运行 App() 又不会运行 setInterval 了。

真是意想不到啊!

正确写法至少有两种正确写法,示例如下。

方法一第一种方法是:

在每次 positionY 改变时都执行 useEffect,使用最新的 positionY 来创建一个新的 setInterval;与此同时,之前的 setInterval 会被自动清除,同时只会有一个 setInterval 计时器;示例如下:

function App() {
  const [positionY, setPositionY] = useState(0)

  useEffect(() => {
    timer = setInterval(() => {
      if (positionY < WINDOW_HEIGHT) {
        setPositionY(positionY + 5)
      }
    }, 30)
    
    return () => {
        // 每次执行新的 useEffect 时,之前的 useEffect 会被清理
        // 这个函数会被调用,从而清除之前的 setInterval 计时器
        clearInterval(timer);
    };
  }, [positionY]); // 这样保证了每次 positionY 改变时,useEffect 都会执行

  return (
      // 略
}

方法二

第二个方法是:

  • setState 可以接受一个函数,该函数的第一个参数即是最新的 state。通过这种方法可以确保拿到最新的 state;

示例如下:

function App() {
  const [positionY, setPositionY] = useState(0)

  useEffect(() => {
    timer = setInterval(() => {
      // 这样能保证拿到最新的 positionY
      setPositionY(oldVal => {
        if (oldVal < WINDOW_HEIGHT) {
          return oldVal + 5
        }
        return oldVal
      })
    }, 30)
    
    return () => {
        clearInterval(timer);
    };
  }, []); // 只需要执行一次 useEffect 即可

  return (
  	// 略
}