Question

我正在学习本机反应，现在正在使用反应钩子。对此我感到很高兴，但是我对useEffect的清理工作有些挣扎。我得到的是，我用它来清理组件。例如，我可以重置计时器。但是我还会对数据数组使用清理吗？

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

useEffect(() => {
doSomething, fetchData;

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

由于这只是一个console.log，我是对的，这里什么也没发生，这只是示例中的占位符？

非常感谢！

Answer 1

是的，useEffect返回的函数将在组件卸载时调用。因此，这是进行所有清理，退订，发布等操作的正确位置。

Answer 2

清理功能可以清理所有正在运行的订阅，事件侦听器，计时器，打开的Web套接字连接，即使在卸载组件后这些连接仍可以运行。

例如

library(stringr)
input_fmla <- "as.formula(hp ~ factor(gear) + qsec + am)"
temp <- str_remove_all(input_fmla, "(as.formula\\([^ ]* ~ |\\)$)")
elements <- trimws(str_split(temp, pattern = "\\+")[[1]])

在上述情况下，我们以1秒的间隔useEffect(() => { setInterval(() => {console.log("hello")},1000) }, [])'hello'。如果我们不提供清除功能来清除间隔，则即使在组件卸载后间隔也会运行，从而导致应用程序中的内存泄漏。计时器，打开的Web套接字连接也可能发生同样的事情。

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

要解决间隔情况

console.log

有关useEffect清理的一些问题

2 个答案: