useEffect
是 React Hooks 中的一个重要函数,它让你可以在函数组件中执行副作用操作。副作用可能包括数据获取、订阅或者手动修改 DOM 等等。
useEffect
函数接受两个参数,第一个参数是一个函数,在这个函数中,你可以执行你需要的副作用操作。如果你的副作用操作需要清除机制,那么你可以在这个函数中返回一个函数,这个返回的函数就是清除函数。第二个参数是一个数组,数组中包含的是你的副作用函数所依赖的变量。
清除机制在以下两种情况下执行:
- 组件卸载时,清除上一次副作用的剩余或者不再需要的操作,防止内存泄露。
- 组件更新时,如果
useEffect
的依赖发生变化,那么在执行当前副作用之前,先执行清除函数。
举个例子,如果你在组件中添加了一个事件监听器,你可能需要在组件卸载时移除它,以避免内存泄露,代码可能如下:
import React, { useEffect } from "react";
function Example() {
useEffect(() => {
// 添加事件监听器
window.addEventListener("resize", handleResize);
// 返回的函数会在组件卸载时调用,移除事件监听器
return () => {
window.removeEventListener("resize", handleResize);
};
}, []); // 依赖数组为空,表示只在组件挂载和卸载时执行
// ...
}
在这个例子中,useEffect
的清除机制就是移除之前添加的事件监听器。这个清除操作会在组件卸载时执行,因为我们的依赖数组是空的,所以它只在组件挂载和卸载时运行。