useEffect()的清除机制是什么？在什么时候执行？

React面试题 5月前 0 257

useEffect 是 React Hooks 中的一个重要函数，它让你可以在函数组件中执行副作用操作。副作用可能包括数据获取、订阅或者手动修改 DOM 等等。

useEffect 函数接受两个参数，第一个参数是一个函数，在这个函数中，你可以执行你需要的副作用操作。如果你的副作用操作需要清除机制，那么你可以在这个函数中返回一个函数，这个返回的函数就是清除函数。第二个参数是一个数组，数组中包含的是你的副作用函数所依赖的变量。

清除机制在以下两种情况下执行：

组件卸载时，清除上一次副作用的剩余或者不再需要的操作，防止内存泄露。
组件更新时，如果 useEffect 的依赖发生变化，那么在执行当前副作用之前，先执行清除函数。

举个例子，如果你在组件中添加了一个事件监听器，你可能需要在组件卸载时移除它，以避免内存泄露，代码可能如下：

import React, { useEffect } from "react";

function Example() {
  useEffect(() => {
    // 添加事件监听器
    window.addEventListener("resize", handleResize);

    // 返回的函数会在组件卸载时调用，移除事件监听器
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []); // 依赖数组为空，表示只在组件挂载和卸载时执行

  // ...
}

在这个例子中，useEffect 的清除机制就是移除之前添加的事件监听器。这个清除操作会在组件卸载时执行，因为我们的依赖数组是空的，所以它只在组件挂载和卸载时运行。

发表评论 取消回复

发表评论取消回复