useEffect中返回函数的作用

最新推荐文章于 2024-06-05 10:05:14 发布

明月松江

最新推荐文章于 2024-06-05 10:05:14 发布

阅读量451

点赞数 3

文章标签：前端 javascript react.js

本文链接：https://blog.youkuaiyun.com/u010007013/article/details/139392625

版权

为什么要在 effect 中返回一个函数？这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分。

React 何时清除 effect？ React 会在[组件卸载的时候]执行清除操作。正如之前学到的，effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。

useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // 你想要每秒递增该计数器...
    }, 1000)
    return () => clearInterval(intervalId);
  }, [count]); // 🚩 ... 但是指定 `count` 作为依赖项总是重置间隔定时器。