关于useEffect的cleanUp的一些问题答案

【问题标题】：Some questions about the cleanUp of useEffect关于useEffect的cleanUp的一些问题
【发布时间】：2020-06-11 04:39:09
【问题描述】：

我正在学习 react native，我现在正在使用 react hooks。我很高兴，但我在清理 useEffect 方面有点挣扎。我得到的是，我用它来清理组件。例如，我可以重置计时器。但是我还会对数据数组使用清理吗？

例如，我在 useEffect 中获取数据，然后在卸载时将数据数组重置为 null？我也经常看到（在某些示例中）这样的 useEffect：

useEffect(() => {
doSomething, fetchData;

return => { console.log("clean up")}
},[]);

因为这只是一个 console.log，我是对的，这里什么都没有发生，这只是示例中的一个占位符？

非常感谢！

【问题讨论】：

当一个 react 元素被卸载时，所有的状态都被破坏了，所以你不必手动重置任何东西。清理功能主要用于避免更新已卸载元素中的状态。例如关闭一个 websocket 连接或忽略一个花费太长时间并在组件已经在 UI 中消失时完成的请求
当你在这个主题上时，看看当你从一个带有依赖关系列表的 useEffect 返回一个清理函数时会发生什么。它可能有点令人困惑，但非常重要，根据我的经验，大多数 React 开发人员甚至都不知道它存在。 stackoverflow.com/questions/55148322/…

标签： reactjs react-native react-hooks

【解决方案1】：

清理功能是清理任何正在运行的订阅、事件侦听器、计时器、打开的 web-socket 连接，即使在组件卸载后仍然可以运行。

例如

useEffect(() => {
  setInterval(() => {console.log("hello")},1000)
}, [])

在上面的例子中，我们 console.log 'hello' 间隔 1 秒。如果我们不提供清理功能来清除间隔，即使在组件卸载后间隔也会运行，从而导致应用程序中的内存泄漏。同样的事情也可能发生在计时器、打开的 web-socket 连接上。

这就是为什么需要提供清理功能来关闭任何长时间运行的任务或在组件卸载时关闭它们的打开资源。

修复间隔情况

useEffect(() => {
  let interval = setInterval(() => {console.log("hello")}, 1000)

  return () => {
    clearInterval(interval) // clear the interval in the returning function
  }
}, [])

【讨论】：

【解决方案2】：

是的，useEffect 返回将在组件卸载时调用的函数。所以这是所有清理、取消订阅、发布等操作的正确位置。

【讨论】：