useEffect用法 - 技术栈

React中useEffect处理副作用详解

在React中，副作用指的是那些与组件渲染无关但需要在组件生命周期中执行的操作。 useEffect Hook 就是用来管理这些副作用的工具。

一、什么是副作用？

副作用是指：

数据获取（API调用）
订阅事件（如WebSocket连接）
手动修改DOM
设置定时器/计数器
日志记录
本地存储读写
这些操作不直接参与UI渲染，但会影响组件或应用的行为。

二、为什么需要useEffect？

React函数组件的核心职责是根据props和state渲染UI，但：

直接在组件函数中写副作用代码会导致：
- 每次渲染都执行副作用
- 可能导致无限循环
- 不符合React的纯函数理念
useEffect提供了一个安全的场所来执行副作用，并能：
- 控制副作用何时执行
- 管理副作用的生命周期
- 防止不必要的性能浪费

三、基本语法

useEffect的执行时机取决于依赖项数组：

空依赖数组 [] ：只在组件挂载时执行一次，类似componentDidMount

javascript 复制代码

useEffect(() => {
  // 只执行一次的初始化操作
}, []);

无依赖项：每次组件渲染后都执行，类似componentDidUpdate但会额外执行一次

javascript 复制代码

useEffect(() => {
  // 每次渲染后都执行
});

有依赖项：仅在依赖项变化时执行

javascript 复制代码

useEffect(() => {
  // 当count或name变化时执行
}, [count, name]);

四、清理函数

清理函数用于在组件卸载或依赖项变化前执行，防止内存泄漏，相当于 componentWillUnmount

javascript 复制代码

useEffect(() => {
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);
  
  // 清理函数
  return () => {
    clearInterval(timer); // 清除定时器
  };
}, []);