useEffect 是 React 函数组件中最主要、也最容易“似懂非懂”的 Hook 之一。

简单讲“副作用”，指的是：

• 请求接口
• 操作 DOM
• 订阅事件
• 定时器
• localStorage、websocket 等持久化手段
• 手动修改 document.title
• …，还有其他任何会影响组件外部世界的行为。

一、先理解：为什么需要 useEffect？

使用者痛点：在函数组件里写了 API 调用、定时器或事件监听，却发现页面卡顿、无限循环或内存泄漏。

React 组件的理想模型是：

UI = f

即「根据 state 渲染 UI」。渲染过程必须保持纯粹，不能出现以下操作：

fetch
setTimeout
addEventListener
直接操作 DOM
/* …*/

为了解决这个问题，React 提供了 useEffect让可以在「渲染结束后」安全地执行副作用：

二、useEffect 基础语法

useEffect => {
// 副作用逻辑
}。)

三、useEffect 的执行时机

. 不写依赖数组

useEffect => {
console.log
})

- 等价于

User Pain: 常见的误解是「只会在挂载时执行」——实际它会在每一次更新都跑一次。

示例代码这方面，

function App {
const = useState
useEffect => {
console.log
})
return (
 setCount}>
{count}

)
}

点击按钮后控制台会输出多次：「执行了」——因为首次挂载 + 每次状态更新都会触发。

. 空依赖数组

useEffect => {
console.log
}。)

- 等价于类组件的

User Pain: 初次加载需要发请求或注册全局事件，却不小心写成了默认行为导致重复请求。

• 适合场景的观点是，初始化数据、注册一次性事件、创建 WebSocket 链接等。

useEffect => {
fetchUser
},)

. 带依赖项的数组（如 )

useEffect => {
console.log
},)

说到示例代码。

function App {
const = useState
const = useState
useEffect => {
console.log
},)
return (
<>
 setCount}>count
 setName}>name
)
}

• *点击「count」按钮 → effect 执行。
• *点击「name」按钮 → effect 不会执行，因为它不在依赖列表里。

四、依赖数组底层原理 —— 浅比较

React 使用

Object.is

- 如果值相等，则跳过本次 effect；如果不相等，则重新运行 effect。老实说，

"五、为什么对象会导致无限循环？"

*常见面试题*
scss
useEffect => {
console.log
}。)

*原因*的观点是，每次渲染都会生成一个新对象，地址不同 → React 判定依赖变更 → effect 重复触发 → 死循环。
SOLUTION:

使用 `useMemo` 或 `useRef` 稳定引用对象。

六、副作用清理 

至于关键点，返回一个函数用于清理旧的副作用。
scss
useEffect => {
// 副作用
return => {
// 清理逻辑
}
},)

返回的函数会在下一次 effect 执行前或组件卸载前调用。

七、为什么一定要清理？


定时器仍在运行 → 内存泄漏 

WebSocket 未关闭 → 多余网络流量 

全局事件未移除 → 重复触发 
...etc...


八、定时器清理示例 
scss
// ❌ 错误写法
useEffect => {
setInterval => { console.log },1000)
},)
javascript
// ✅ 正确写法
useEffect => {
const timer = setInterval => { console.log },1000)
return => clearInterval
}。)

九、事件监听清理示例 
scss
// ❌ 错误写法
useEffect => {
window.addEventListener
},)
javascript
// ✅ 正确写法
useE ffect => {
window.addEventListener
return => window.removeEventListener
},)

十、cleanup 的真实执行顺序 
javascript
useEffect => {
console.log
return => { console.log }
},)


当 count 更新时先打印 cleanup 再打印 effect。

再看原因。
React 必须先销毁旧的副作用，再创建新的。


十一、用 `useEffect` 模拟类组件生命周期 



生命周期方法



componentDidMount
 useEff ect=>{console .log },)

componentDidUpdate
 useEff ect=>{console .log })
或者针对特定变量：
scss
useEff ect=>{console .log }。)

componentWillUnmount
 useEff ect=>{return=>{console .log }},)
​

十二、完整生命周期模拟代码示例 
javascript
function App {
useEff ect=>{
console .log
return=>{ console .log }
},)
return 

App
}

十三、React 18 为什么看到两次 “effect”?


`StrictMode` 在开发环境下故意 **双向挂载**：先挂载 → 卸载 →
挂载，以检测副作用是否具备幂等性。

`生产环境` 不会出现双调用。
​

十四、常见陷阱与方法 

. 无限循环 
scss
// ❌ 错误：每次 effect 都改状态。引起
渲染
useEff ect=>{ setCount },)
说到**解决**，确保 state 更新不会把同一个 deps
触发，或把更新逻辑移到条件判断内部。

. 闭包陷阱 
scss
// ❌ 初始 count 永远被打印
useEff ect=>{
const timer = setInterval=>{ console .log }。1000)
return=>clearInterval
},)
说到**解决**，


把 count 加入依赖数组，使 timer 在每次变化时重新创建；怎么说呢，

或者使用 ref 保存最新值：

js
const latest = useRef;latest.current = count;useEff ect=>{
const timer=setInterval=>console.log,1000);return=>clearInterval;},)，

十五、Use Effect 的执行流程图 


*首次渲染* ： render ➜ DOM 更新 ➜ effect 执行 ➜ .

*状态更新* ： render ➜ DOM 更新 ➜ **先** cleanup 老的 effect ➜ 再执行新的 effect.

*组件卸载* ： cleanup 执行一次接下来移除 DOM.

十六、`useEffect` vs `useLayoutEffect` 区别
     


Hook
何时运行



/us eE ffect
/浏览 器绘制完毕后
/不会阻塞 UI 渲染.

/us eL ayoutE ffect
/DOM 更新完毕且绘制前
/同步阻塞。可用于读取布局信息或避免闪烁.
​
**建议**这方面，优先使用 `useEffect`，仅当需要同步测量 DOM 或防止视觉抖动才切换到 `useLayoutEffect`.

"十七、公司级常用方法"

. 单一职责原则 


`不要把请求数据 / 注册事件 / 修改标题全部写进同一个 effect 中。`
SOLUTION: 拆分为多个专职的 effects：
js
// 数据获取
us eEf fect=>{ fetchData }。)
// 文档标题
us eEf fect=>{ document.title=`${title}` },)
// 全局事件
us eEf fect=>{
const handler=e=>{/*…*/}
window.addEventListener
return=>window.removeEventListener
},)
​

. 避免滥用 Effect

scss
// ❌ 错误：把派生状态放进 effect 中再 setState
us eEf fect=>{ setFullName }。)
**正确做法**：
js
const fullName = `${first} ${last}` // 在 render 时直接计算即可。至于**原因**，所有能通过当前渲染推导出的值，都不应额外存入 state。否则会导致不必要的 re‑render 与复杂的 deps 管理。

"十八、最终主要概念"


`render` 是 **纯函数** —— 它只负责把 state 映射成 UI。

`useEffect` 是 **副作用同步器** —— 当某些数据变化后把这些变化同步到外部世界。


 数据变化 
 同步什么 


  count 
 更新 document.title 

 使用者登录成功 
 发送获取使用者信息请求 







"十九、一句话"
/ us eEffect => 渲染后执 行 副作 用
p>
依赖 数组 控 制 副作 用 重 新 同 步 的 时 间 点。p>
clean up 函数 用 于 清 理 上 一 次 副作 用，防 止 内 存 泄 漏 与 重复 行 为。
h


此内容已按照需求进行排版。并嵌入常见痛点与实战建议，帮助读者快速定位并解决使用 Use Effect 时遇到的问题。