wehub-skill-sync
46 lines
905 B
Markdown
46 lines
905 B
Markdown
---
|
|
title: 收窄 Effect 依赖
|
|
impact: LOW
|
|
impactDescription: 减少 effect 的重复执行
|
|
tags: rerender, useEffect, dependencies, optimization
|
|
---
|
|
|
|
## 收窄 Effect 依赖
|
|
|
|
使用原始类型依赖而非对象依赖，以减少 effect 的重复执行。
|
|
|
|
**不正确的写法（任何 user 字段变化都会重新执行）：**
|
|
|
|
```tsx
|
|
useEffect(() => {
|
|
console.log(user.id)
|
|
}, [user])
|
|
```
|
|
|
|
**正确的写法（仅当 id 变化时才重新执行）：**
|
|
|
|
```tsx
|
|
useEffect(() => {
|
|
console.log(user.id)
|
|
}, [user.id])
|
|
```
|
|
|
|
**对于派生状态，在 effect 外部计算：**
|
|
|
|
```tsx
|
|
// 不正确的写法：width=767, 766, 765……每次变化都会执行
|
|
useEffect(() => {
|
|
if (width < 768) {
|
|
enableMobileMode()
|
|
}
|
|
}, [width])
|
|
|
|
// 正确的写法：仅在布尔值变化时执行
|
|
const isMobile = width < 768
|
|
useEffect(() => {
|
|
if (isMobile) {
|
|
enableMobileMode()
|
|
}
|
|
}, [isMobile])
|
|
```
|