Reactjs 关于Useffect清理的几个问题

我正在学习react native，现在正在使用react挂钩。对此我很高兴，但我正在努力清理Useffect。 我得到的是，我用它来清理组件。例如，我可以重置计时器。但我是否也会对数据数组进行清理

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

useEffect(() => {
doSomething, fetchData;

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

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

---

非常感谢

是，

useffect

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

是，

useffect

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

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

比如说

useffect（（）=>{
setInterval（（）=>{console.log（“hello”）}，1000）
}, [])

在上面的例子中，我们以1s的间隔使用

console.log

“hello”。如果我们不提供清除函数来清除间隔，那么即使在组件卸载之后，间隔也会运行，从而导致应用程序内存泄漏。计时器、打开的web套接字连接也会发生同样的情况

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

修复间隔情况

useffect（（）=>{
let interval=setInterval（（）=>{console.log（“hello”）}，1000）
return（）=>{
clearInterval（interval）//清除返回函数中的间隔
}
}, [])

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

比如说

useffect（（）=>{
setInterval（（）=>{console.log（“hello”）}，1000）
}, [])

在上面的例子中，我们以1s的间隔使用

console.log

“hello”。如果我们不提供清除函数来清除间隔，那么即使在组件卸载之后，间隔也会运行，从而导致应用程序内存泄漏。计时器、打开的web套接字连接也会发生同样的情况

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

修复间隔情况

useffect（（）=>{
let interval=setInterval（（）=>{console.log（“hello”）}，1000）
return（）=>{
clearInterval（interval）//清除返回函数中的间隔
}
}, [])

卸载react元素时，所有状态都将被破坏，因此您不必手动重置任何内容。Cleanup函数主要用于避免更新已卸载元素中的状态。例如，关闭websocket连接或忽略一个请求，该请求花费的时间太长，并且在组件已在UI中消失时完成。在本主题中，请查看从具有依赖项列表的useEffect返回清理函数时发生的情况。它可能有点混乱，但非常重要，根据我的经验，大多数开发者甚至不知道它的存在。当react元素卸载时，所有状态都将被破坏，因此您不必手动重置任何内容。Cleanup函数主要用于避免更新已卸载元素中的状态。例如，关闭websocket连接或忽略一个请求，该请求花费的时间太长，并且在组件已在UI中消失时完成。在本主题中，请查看从具有依赖项列表的useEffect返回清理函数时发生的情况。它可能有点混乱，但非常重要，根据我的经验，大多数开发者甚至不知道它的存在。