副作用与清除机制

什么是副作用？

在 React 中，副作用（Side Effects）指的是那些不会在组件渲染过程中同步完成，且会影响外部系统或产生持久影响的操作。常见副作用包括：

订阅事件或数据流
发送网络请求
操作 DOM
设置定时器或轮询
手动修改浏览器标题、localStorage 等

使用 useEffect 处理副作用

useEffect 是 React 中用于处理副作用的 Hook。它在组件渲染完成后执行一次，也可以根据依赖项多次执行。

示例：设置定时器

jsx

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器执行');
    }, 1000);

    // 返回清理函数
    return () => {
      clearInterval(timer);
      console.log('定时器清除');
    };
  }, []); // 空数组表示只在挂载和卸载时运行
  return <p>定时器已启动，查看控制台输出</p>;
}

清除副作用的作用

当组件卸载或 useEffect 的依赖发生变化时，React 会自动调用 useEffect 中返回的清理函数。这种机制可以帮助我们：

取消订阅，防止内存泄漏
清理定时器或轮询任务
撤销 DOM 操作或全局事件监听器

示例：事件监听与清除

jsx

import { useEffect } from 'react';

function ResizeListener() {
  useEffect(() => {
    const handleResize = () => {
      console.log('窗口尺寸变化');
    };
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <p>请尝试调整窗口大小</p>;
}

总结

useEffect 中的清除机制是管理副作用生命周期的关键，它确保组件在卸载或更新时不会留下无用的资源或事件，保持应用运行的性能和正确性。