skillhub-088-vercel-react-best-practices
wehub-skill-sync
43 行
1.0 KiB
Markdown
43 行
1.0 KiB
Markdown
---
|
|
title: Initialize App Once, Not Per Mount
|
|
impact: LOW-MEDIUM
|
|
impactDescription: avoids duplicate init in development
|
|
tags: initialization, useEffect, app-startup, side-effects
|
|
---
|
|
|
|
## 初始化应用只执行一次，而非每次挂载都执行
|
|
|
|
请勿将每次应用加载只需执行一次的全局初始化逻辑放在组件的 `useEffect([])` 内部。组件可能被重新挂载，导致副作用重新执行。应改用模块级守卫变量或在入口模块中进行顶层初始化。
|
|
|
|
**错误做法（开发环境执行两次，重新挂载时再次执行）：**
|
|
|
|
```tsx
|
|
function Comp() {
|
|
useEffect(() => {
|
|
loadFromStorage()
|
|
checkAuthToken()
|
|
}, [])
|
|
|
|
// ...
|
|
}
|
|
```
|
|
|
|
**正确做法（每次应用加载只执行一次）：**
|
|
|
|
```tsx
|
|
let didInit = false
|
|
|
|
function Comp() {
|
|
useEffect(() => {
|
|
if (didInit) return
|
|
didInit = true
|
|
loadFromStorage()
|
|
checkAuthToken()
|
|
}, [])
|
|
|
|
// ...
|
|
}
|
|
```
|
|
|
|
参考文档：[Initializing the application](https://react.dev/learn/you-might-not-need-an-effect#initializing-the-application)
|