当前位置：首页 > news >正文

组件的生命周期：`useEffect` 的威力与副作用处理

news 2025/8/30 6:30:54

组件的生命周期：`useEffect` 的威力与副作用处理

作者：码力无边

各位React探险家，欢迎重返我们的征途！我是码力无边，在《React奇妙之旅》的第七站，我们将一起踏入一个更深邃、更强大的领域。

在上一阶段，我们通过构建Todo List应用，成功地将React的基础知识融会贯通。我们的组件现在能够管理自己的状态（State）、接收外部属性（Props），并响应用户事件。但是，现实世界的应用远比这复杂。我们的组件常常需要与“外部世界”进行交互，比如：

当组件第一次显示在屏幕上时，需要去服务器请求数据。
当用户的ID发生变化时，需要根据新ID重新获取用户信息。
我们需要设置一个定时器，每秒钟更新一次时间显示。
当组件即将从屏幕上消失时，需要清理掉之前设置的定时器，以防内存泄漏。

这些操作，都属于一个共同的范畴——副作用（Side Effects）。它们不是纯粹的渲染逻辑，而是组件与外部系统交互的“副作用”。在函数组件的时代，如何优雅地处理这些副作用呢？

这就是我们今天要认识的第二位Hook巨星——useEffect。它就像是组件的“灵魂感知器”，能够感知到组件生命周期的各个关键节点（挂载、更新、卸载），并在这时执行我们指定的“魔法”。掌握了useEffect，你就掌握了在React中处理异步操作和外部交互的钥匙！

第一章：什么是“副作用”？—— 函数组件的“份外之事”

在理解useEffect之前，我们必须先搞清楚它要解决的问题：副作用。

在函数式编程的理念中，一个“纯函数”（Pure Function）应该具备两个特点：

给定相同的输入，永远返回相同的输出。
函数执行过程中，不产生任何“副作用”。

“副作用”是指一个函数除了返回一个值之外，还对函数外部的世界产生了可观察的改变。常见的副作用包括：

DOM操作：手动修改DOM（比如直接用document.title = ...修改页面标题）。
网络请求：向API发送请求获取数据 (fetch, axios)。
定时器：设置或清除定时器 (setTimeout, setInterval)。
本地存储：读取或写入localStorage / sessionStorage。
订阅/取消订阅：添加或移除事件监听器 (window.addEventListener)。

我们的React函数组件，其主要职责是根据props和state计算并返回JSX，这是一个纯粹的渲染过程。如果我们在组件函数的主体（return之前）直接执行副作用操作，会发生什么？

❌ 一个灾难性的例子：

import { useState } from 'react';function DisasterComponent() {const [count, setCount] = useState(0);// 灾难：直接在组件主体执行副作用// 每次渲染都会执行，包括因父组件更新导致的重渲染fetch('https://api.example.com/data').then(res => res.json()).then(data => console.log('Data fetched!', data));return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

这段代码的问题在于，每一次组件渲染，无论是count状态改变，还是父组件更新导致DisasterComponent重渲染，那个fetch请求都会被无差别地重新发送！这会造成巨大的资源浪费和不可预测的行为。

我们需要一种机制，能够让我们把这些副作用操作，从主渲染流程中剥离出来，并精确地控制它们的执行时机。

这，就是useEffect的使命。

第二章：`useEffect`基础用法 —— “渲染之后，请做这件事”

useEffect的基本语法如下：

import { useEffect } from 'react';useEffect(() => {// 这里是你的副作用代码// 它会在每次组件渲染完成后执行
});

它接受一个函数作为第一个参数，我们称之为“effect函数”。React会在完成DOM更新之后，延迟执行这个函数。这保证了effect函数不会阻塞浏览器的主线程渲染。

让我们用useEffect来修复上面的问题，并实现一个更合理的需求：当组件首次渲染时，获取一次数据。

import { useState, useEffect } from 'react';function DataFetcher() {const [data, setData] = useState(null);useEffect(() => {console.log('Effect is running!');// 副作用：获取数据fetch('https://jsonplaceholder.typicode.com/todos/1') // 一个公开的测试API.then(response => response.json()).then(json => {console.log('Data fetched:', json);setData(json);});}, []); // <-- 注意这个神奇的空数组！return (<div><h2>Data Fetcher</h2>{data ? <p>Title: {data.title}</p> : <p>Loading...</p>}</div>);
}

把这个组件放到你的App.jsx中运行，然后观察控制台。你会发现"Effect is running!"和"Data fetched"都只打印了一次！无论你如何与页面其他部分交互，这个useEffect都不会再次运行。

魔法揭秘：依赖项数组 (Dependency Array)

useEffect的第二个参数是一个数组，我们称之为依赖项数组。这个数组是控制effect执行时机的“遥控器”。

情况一：不提供第二个参数
```
useEffect(() => {// 每次渲染后都会执行
});
```
这等同于我们一开始的“灾难性”例子。组件的每一次渲染（包括首次挂载和后续的所有更新）之后，effect都会被重新执行。
情况二：提供一个空数组 []
```
useEffect(() => {// 只在组件首次挂载（mount）时执行一次
}, []);
```
这是我们上面例子中使用的。React会检查这个空数组，发现里面没有任何依赖项，所以它只会在组件第一次“上场”时运行一次effect，之后就“高枕无忧”了。这对于做一些一次性的初始化工作（如获取初始数据、设置全局监听器）非常有用。
情况三：提供一个包含依赖项的数组 [dep1, dep2]
```
useEffect(() => {// 首次挂载时执行一次// 并且，在每次dep1或dep2的值发生变化后的渲染中，再次执行
}, [dep1, dep2]);
```
这是useEffect最强大的模式。React会在每次渲染后，比较依赖项数组中的每一项与上一次渲染时的值是否发生了变化（使用Object.is进行比较）。只要有任何一项发生了变化，effect函数就会被重新执行。

第三章：依赖项数组的威力 —— 监听变化

让我们通过一个实例来感受依赖项数组的威力。我们要实现一个功能：用户在一个输入框中输入一个post ID，然后组件根据这个ID去获取对应的文章标题。

import { useState, useEffect } from 'react';function PostViewer() {const [postId, setPostId] = useState(1);const [postTitle, setPostTitle] = useState('');const [isLoading, setIsLoading] = useState(false);useEffect(() => {console.log(`Effect is running for postId: ${postId}`);setIsLoading(true);// 根据 postId 获取数据fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(res => res.json()).then(data => {setPostTitle(data.title);setIsLoading(false);}).catch(error => {console.error("Fetching error: ", error);setIsLoading(false);});}, [postId]); // <-- 依赖项是 postIdreturn (<div><h2>Post Viewer</h2><inputtype="number"value={postId}onChange={e => setPostId(e.target.value)}min="1"/>{isLoading ? <p>Loading post...</p> : <h3>{postTitle}</h3>}</div>);
}

工作流程分析：

首次渲染：postId为1。useEffect执行，获取ID为1的文章数据，页面显示"Loading…"，数据回来后显示文章标题。
用户交互：用户将输入框的数字改为2。这会触发setPostId(2)。
状态更新与重渲染：postId state变为2，组件重渲染。
依赖项检查：React在渲染后检查useEffect的依赖项。它发现上一次的postId是1，而这一次是2。值发生变化了！
Effect重新执行：React重新执行effect函数，这次fetch的URL是.../posts/2。
UI更新：页面再次显示"Loading…"，直到新的文章数据获取回来。

通过把postId放入依赖项数组，我们精确地告诉了React：“只有当postId改变时，我才关心重新获取数据这件事。”

一个重要的规则： useEffect内部用到的、所有来自组件作用域的变量（props, state, 或自定义函数），都应该被包含在依赖项数组中。 如果你遗漏了某个依赖，ESLint插件通常会给你一个警告，千万不要忽视它！

第四章：清理副作用 —— “人走茶凉，物归原主”

有些副作用操作，在组件被销毁（卸载，unmount）时，需要进行“清理”，否则可能会导致内存泄漏或bug。典型的例子就是定时器和事件监听。

useEffect提供了一种优雅的清理机制：在effect函数中返回一个函数。这个返回的函数，我们称之为清理函数（Cleanup Function）。

React会在以下两个时机执行这个清理函数：

在下一次effect执行之前：如果依赖项发生变化导致effect要重新运行，React会先执行上一次effect返回的清理函数。
在组件卸载时：当组件从DOM中移除时，React会执行最后一次effect返回的清理函数。

让我们来看一个实现秒表的例子：

import { useState, useEffect } from 'react';function Timer() {const [seconds, setSeconds] = useState(0);useEffect(() => {console.log('Setting up a new interval');// 副作用：设置一个定时器const intervalId = setInterval(() => {setSeconds(prevSeconds => prevSeconds + 1);}, 1000);// 清理函数return () => {console.log('Cleaning up the interval');clearInterval(intervalId); // 清除定时器};}, []); // 空数组意味着这个effect只在挂载时设置，卸载时清理return <h1>{seconds}s</h1>;
}// 在App.jsx中做一个可以控制Timer组件显示/隐藏的父组件
function App() {const [showTimer, setShowTimer] = useState(true);return (<div><button onClick={() => setShowTimer(!showTimer)}>Toggle Timer</button>{showTimer && <Timer />}</div>);
}

实验一下：

页面加载，Timer组件挂载。控制台打印"Setting up a new interval"，计时器开始工作。
点击"Toggle Timer"按钮，showTimer变为false，Timer组件被卸载。
在Timer消失的瞬间，控制台会打印"Cleaning up the interval"。定时器被成功清除了！
再次点击按钮让Timer显示，上述过程会重新开始。

如果没有这个清理函数，当你隐藏Timer后，那个setInterval仍然在后台默默地运行并尝试更新一个已经不存在的组件的状态，这就是典型的内存泄漏。

总结：`useEffect`，副作用的终极管理者

今天我们深入探索了useEffect这个强大Hook的方方面面。它是连接我们纯净的React组件与纷繁复杂的外部世界的桥梁。

让我们总结一下今天的核心要点：

副作用是组件渲染之外的任何操作，如API请求、定时器、DOM操作等。
**useEffect**让我们可以在函数组件中执行副作用，它的执行时机在DOM更新之后。
依赖项数组是useEffect的“开关”：
- 不传：每次渲染后都执行。
- [] (空数组)：仅在组件首次挂载时执行一次。
- [dep1, ...]：在首次挂载和任何依赖项变化后执行。
清理函数：通过在effect函数中return一个函数，来处理副作用的清理工作，防止内存泄漏。它在组件卸载或下一次effect运行前被调用。