异常教程

react useeffect（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 React 开发中，useEffect 是一个核心的 Hook，它帮助开发者管理组件中的副作用（Side Effects）。无论是数据获取、订阅事件、DOM 操作，还是定时器，useEffect 都能提供灵活且可控的解决方案。对于编程初学者而言，理解 useEffect 的工作机制和使用场景可能有些挑战，但通过循序渐进的讲解和生动的案例，我们可以将复杂概念转化为易懂的知识点。本文将从基础到进阶，结合实际代码示例，带读者逐步掌握 useEffect 的核心原理与最佳实践。

基础用法：像“自动执行的助手”一样工作

useEffect 的核心功能是让开发者在组件挂载、更新或卸载时执行特定代码，类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法。它的语法如下：

useEffect(() => {
  // 要执行的副作用代码
  return () => {
    // 清理副作用的代码（可选）
  };
}, [依赖项]); // 依赖项数组（可选）

比喻理解：可以将 useEffect 想象成一个“自动执行的助手”。当组件第一次渲染时，它会默默完成初始化任务（如数据请求）；当组件状态或属性变化时，它会根据依赖项决定是否需要重新执行任务；当组件卸载时，它会确保所有未完成的任务（如定时器、事件监听）被清理干净。

示例 1：初次渲染时获取数据

import { useState, useEffect } from 'react';

function DataComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json));
  }, []); // 空数组表示仅执行一次

  return <div>{data.map(item => <div key={item.id}>{item.name}</div>)}</div>;
}

在上述代码中，useEffect 的依赖项数组为空，因此它只会在组件首次挂载时执行数据获取操作。如果依赖项数组包含某个状态变量（如 [data]），则会在该变量变化时重新触发副作用。

依赖项管理：明确“触发条件清单”

依赖项数组是 useEffect 的关键部分，它决定了副作用的执行时机。如果省略依赖项数组，useEffect 会默认在每次渲染时执行副作用，这可能导致不必要的性能损耗或无限循环。

核心规则：

  1. 如果依赖项数组为空 []，副作用仅在组件挂载和卸载时执行。
  2. 如果包含变量（如 [count]），副作用会在变量变化时重新执行。
  3. 必须包含在副作用函数中使用的外部变量，否则会触发 ESLint 警告（可通过 eslint-disable 忽略，但不推荐）。

比喻理解：依赖项数组就像一份“触发条件清单”。只有当清单中的变量发生变化时，副作用才会重新执行。例如：

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // 当 count 变化时更新标题

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

在上述案例中，useEffect 依赖 count 变量，因此每当用户点击按钮时，标题会实时更新为当前计数。

清理副作用：避免“资源泄露”

当副作用涉及长时间运行的操作（如定时器、网络请求、事件监听）时，必须通过 return 语句返回一个“清理函数”，确保组件卸载时释放资源。

示例 2：使用定时器并清理

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(prev => prev + 1);
    }, 1000);

    // 清理函数在组件卸载或副作用重新执行前调用
    return () => {
      clearInterval(intervalId);
    };
  }, []); // 依赖项为空，定时器仅在挂载时启动

  return <div>Elapsed Time: {time} seconds</div>;
}

比喻理解：清理函数就像离开房间前“关灯”的动作。如果不清理，即使组件卸载，定时器仍会持续运行，导致内存泄漏或意外行为。

进阶用法：与状态、生命周期的结合

场景 1：条件性执行副作用

通过逻辑判断，可以实现“仅在特定条件下执行副作用”。例如，仅在某个状态值大于 0 时发起 API 请求：

function ConditionalEffect() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    if (value > 0) {
      fetch(`https://api.example.com/data/${value}`)
        .then(response => response.json())
        .then(data => console.log('Received:', data));
    }
  }, [value]); // 依赖 value 变化

  return (
    <input
      type="number"
      value={value}
      onChange={e => setValue(Number(e.target.value))}
    />
  );
}

场景 2：与 useRef 结合优化性能

当副作用需要频繁执行但实际数据未变化时，可以通过 useRef 缓存变量值，避免重复计算：

function OptimizedEffect() {
  const [input, setInput] = useState('');
  const prevInputRef = useRef('');

  useEffect(() => {
    // 仅在 input 真正变化时执行
    if (input !== prevInputRef.current) {
      console.log('Input changed:', input);
      prevInputRef.current = input;
    }
  }, [input]); // 依赖 input 变化
  return <input value={input} onChange={e => setInput(e.target.value)} />;
}

常见问题与解决方案

问题 1：无限循环的副作用

现象：组件不断重新渲染，控制台显示“Too many re-renders”错误。
原因：副作用函数内部直接修改了状态，且未正确设置依赖项。
解决方法：

  1. 确保副作用的依赖项数组包含所有外部变量。
  2. 使用 useCallback 或 useMemo 缓存函数或值。

示例：

function InfiniteLoopExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 错误写法：直接修改状态导致循环
    // setCount(prev => prev + 1);

    // 正确写法：通过依赖项控制
    if (count === 0) {
      setCount(1);
    }
  }, [count]); // 依赖项包含 count，导致循环

  return <div>{count}</div>;
}

问题 2：跨组件状态共享与副作用

当多个组件需要共享状态时，可通过 Context 或状态管理库（如 Redux）配合 useEffect 实现响应式更新：

// 父组件
export const DataContext = React.createContext();

function Parent() {
  const [sharedData, setSharedData] = useState([]);

  return (
    <DataContext.Provider value={{ sharedData, setSharedData }}>
      <ChildA />
      <ChildB />
    </DataContext.Provider>
  );
}

// 子组件
function ChildA() {
  const { sharedData } = useContext(DataContext);

  useEffect(() => {
    // 根据 sharedData 执行副作用
  }, [sharedData]);
}

实战案例：构建动态标题与实时搜索

案例目标

实现一个输入框，当用户输入内容时，页面标题动态更新为输入内容，并在输入停止 500ms 后触发搜索请求。

实现步骤

  1. 使用 useState 管理输入值和搜索结果。
  2. 通过 useEffect 监听输入值变化，更新标题。
  3. 结合防抖（Debounce）技术延迟触发搜索请求。
function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  // 更新标题
  useEffect(() => {
    document.title = `Search: ${searchTerm}`;
  }, [searchTerm]);

  // 防抖搜索
  useEffect(() => {
    const timerId = setTimeout(() => {
      if (searchTerm.trim() !== '') {
        fetch(`https://api.example.com/search?q=${searchTerm}`)
          .then(response => response.json())
          .then(data => setResults(data));
      }
    }, 500);

    return () => clearTimeout(timerId); // 清理定时器
  }, [searchTerm]);

  return (
    <div>
      <input
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      <ul>
        {results.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

总结

通过本文的讲解，我们系统掌握了 useEffect 的核心功能、依赖项管理、副作用清理以及进阶应用场景。无论是数据获取、状态同步，还是复杂交互逻辑的实现，useEffect 都提供了灵活且可控的解决方案。对于开发者而言，理解以下关键点至关重要：

  1. 依赖项数组是控制副作用执行时机的核心。
  2. 清理函数确保资源安全释放，避免内存泄漏。
  3. 与 React 生态的其他 Hook 结合（如 useRef、useContext）可进一步提升代码的复用性和可维护性。

通过持续实践和案例分析，开发者可以逐步掌握 useEffect 的精髓，将其转化为构建高效 React 应用的得力工具。

最新发布

查看更多文章