我正在学习反应原生,我现在正在使用反应钩子。我很高兴,关于这一点,但我在清理useEffect方面有点挣扎。 我得到的是,我用它来清理组件。例如,我可以重置计时器。但是我也会对数据数组使用清理吗?
例如,我正在 useEffect 中获取数据,然后在卸除时将数据数组重置回 null?我也看到很多时候(在某些例子中(这样的useEffect:
useEffect(() => {
doSomething, fetchData;
return => { console.log("clean up")}
},[]);
由于这只是一个控制台.log,我是对的,这里什么都没有发生,这只是示例中的占位符?
多谢!
清理功能是清理任何正在运行的订阅、事件侦听器、计时器、打开的 Web 套接字连接,这些连接即使在组件卸载后仍然可以运行。
例如
useEffect(() => {
setInterval(() => {console.log("hello")},1000)
}, [])
在上面的例子中,我们以 1 秒的间隔console.log
"hello"。如果我们不提供清理函数来清除间隔,即使在组件卸载后,间隔也会运行,从而导致应用程序中的内存泄漏。计时器、打开的 Web 套接字连接也会发生同样的事情。
这就是为什么需要提供清理功能来关闭任何长时间运行的任务或打开的资源以在组件卸载时关闭它们的原因。
修复间隔情况
useEffect(() => {
let interval = setInterval(() => {console.log("hello")}, 1000)
return () => {
clearInterval(interval) // clear the interval in the returning function
}
}, [])
是的,useEffect
返回将在组件卸载时调用的函数。因此,这是所有清理,取消订阅,发布等操作的正确位置。