前置知识

. 为什么需要学 useEffect?

我们总是追求组件的纯粹性 ——给定相同的 props，永远返回相同的 UI。但现实往往是骨感的，需要处理数据获取、订阅消息、手动修改 DOM 等“脏活累活”。

在编程中，这些与外部世界交互、产生额外影响 的操作。就被称为副作用。

为了协调纯粹的 UI 渲染与复杂的现实需求React 提供了 useEffect Hook。在深入它之前，需要先厘清两个主要概念。按理说，

. 保持组件纯粹性与副作用

说到问题。什么是副作用函数，什么是纯函数？

纯函数定义:

1. 相同的输入永远会得到相同的输出。这代表着函数的行为是可预测的。
2. 只负责自己的任务。无副作用出现：它只关心自己的内部逻辑，绝不会去修改函数外部的任何状态。

// 纯函数：只负责计算，不依赖也不修改外部状态
const sum = : number => x + y;sum，// 始终返回相同结果

副作用函数定义：

一个函数在执行过程中，除了返回值之外还对外部环境产生了可观察的影响或修改这个函数就是副作用函数。

常见的副作用行为包括：

1. 修改外部变量: 修改全局变量、修改传入的参数对象。
2. I/O 操作 : 发起网络请求、读写文件、读写数据库。说起来，
3. DOM 操作 : 修改网页标题、手动更改 DOM 节点结构。
4. 程序交互 : 设置定时器（)、订阅事件（)、打印日志（)。
5. 非确定性 : 依赖随机数（) 或当前时间（)，导致相同输入得到不同输出。话说回来，

let total: number = 0;// 外部变量
// 副作用函数：修改了外部 'total' 变量
function apple: number {
total += value;return total;}

. React 组件应该是纯函数

React 的主要设计理念之一就是：组件是一个纯函数。其职责非常单一——并返回 JSX。在渲染阶段，组件不应包含任何副作用。如果你在渲染过程中偷偷做了额外事情。就会打破这个约定，导致难以追踪 bug。)

⚠️ 使用者痛点：

• "每次点击按钮都会多次请求 API"，导致网络流量暴增和响应延迟。"
• "定时器/事件监听未清理，导致内存泄漏和页面卡顿。"
• "无法控制何时执行副作用，代码维护成本高。"

// 正确示例：保持纯净
function Greeting {
return;}
function UserProfile {
// 每次渲染都会发起请求，而且无法去控制时机和清理
fetch.n;return 

使用者资料
}
**为什么这样做危险？说起来，**


* 请求失控 *: 在并发模式下可能多次触发请求；浪费资源，话说回来，

* 内存泄漏 *: 定时器或订阅未及时清理；导致后台持续运行并可能更新已卸载组件。其实，

* 缺乏控制力 *: 渲染由 React 决定。你无法控制何时执行、副作用次数还有依赖条件。


说到**方法**，将所有这些操作委托给专门机制 —— 使用 `useEffect`。


. `` 基本用法
scss
useEffect
**参数**


setup  – Effect处理函数，可以返回一个清理函数。组件挂载时执行setup；依赖项更新时先执行cleanup再执行setup；组件卸载时执行cleanup。

dependencies  – setup中使用到的响应式值列表。必须以数组形式编写如，不传则每次重渲染都执行Effect。 




React 内部是用             –>“”来对比依赖项有没有变化。


scss
useEffect => {
// 副作用代码
},);**返回值**
`useEffect` 返回 `undefined`：
javascript
let a = useEffect => {})
console.log // undefined
**使用步骤**
1️⃣
从 React 中导入 `useEffect` Hook：
javascript
import { useEffect } from 'react';2️⃣ 再在组件顶部调用，并在其中加入一些代码：
javascript
function MyComponent {
useEffect => {
// 每次渲染后都会执行此处代码 — 就是你的“副作用”
});
return;

}



为什么要延迟？

当你的组件渲染完成后再触发 useEffect 中定义的一切，这就保证了：


DOM 已经准备好 — 可以安全访问节点尺寸或位置；

浏览器绘制不会被阻塞 — 网络请求等耗时操作可以异步进行。


执行流程

1️⃣ 渲染阶段React 调用你的组件计算 JSX。

2️⃣ 提交阶段React 把虚拟 DOM 更新到真实 DOM。按理说，

3️⃣ 副作用阶段React 执行你在 useEffect 中写好的代码。


 三种执行模式



模式
特征
类比




无第二个参数
每一次重渲染都运行
componentDidMount + componentDidUpdate


空数组 
僅挂載一次
componentDidMount


指定依赖 
当 dep 改变才跑
componentDidUpdate




示例一 – 无第二个参数

jsx
import { useState } from 'react';

const App = => {
const = useState;const = useState;

useEffect=>{ console.log;})，

return (




);}，


示例二 – 空数组

const App = => {
const = useState;话说回来，

示例三 – 指定依赖

// 当 count 改变才跑；text 改变不会触发，useEffect=>{ console.log;},)，


清理回调 —— 善后工作

当你开启某些持续活动，记得使用 return =>{} 清理：



时机




① 卸載組件


② 下次 effect 执行前




定时器示例

useEffect=>{
const timer=setInterval=>{ setCnt;},1000)，说起来，
 return =>{
clearInterval;console.log，};

},);// 空数组保证只开启一次

return 计時:{cnt});}，

请求竞态问题

当使用者快速输入搜索词，只保留最终一次请求：

const SearchBox = =>{
const =useState;

useEffect=>{
const timer=setTimeout=>{
console.log;},300)，
 return =>{
clearTimeout;console.log，};

},);// keyword 改变就重新跑