useEffect 清理功能 - Javascript

介绍

useEffect 是 React 中最常用的钩子之一，它的作用是在组件渲染完成后执行副作用操作，比如获取数据、监听事件等等。然而，在使用 useEffect 时，我们需要注意到它还有一个非常重要的特性，那就是清理功能。

当使用 useEffect 时，返回一个函数，这个函数会在组件销毁前执行，用于清理副作用操作。这个特性非常有用，可以防止组件卸载后仍然存在未清除的操作，从而引起不必要的内存泄漏和性能问题。

代码示例

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 执行副作用操作
    const handleScroll = () => {};

    window.addEventListener('scroll', handleScroll, true);

    return () => {
      // 清理副作用操作
      window.removeEventListener('scroll', handleScroll, true);
    };
  }, []); // 依赖项为空数组表示只在组件第一次渲染时执行一次

  return <div>Example</div>;
}

从上述代码中可以看到，我们通过 useEffect 注册了一个监听滚动事件的操作，并在返回函数中清除了这个操作。这样，当组件被销毁时，滚动事件监听便会被自动清理。

总结

使用 useEffect 时，不仅要关注它的基本用法，还要注意清理副作用操作。只有正确清理了副作用操作，才能确保组件在卸载时不会带来任何副作用。这里需要注意的是，清理副作用操作是在组件销毁前执行的，因此在清理过程中无法访问组件的状态或 props。如果需要在清理前执行一些操作，需要在组件中保存一些状态信息，并在清理函数中使用。