# 不要使用 useEffect `useEffect` 是 React 中最常被误用的钩子之一。在开发人员寻求它的绝大多数情况下，有一个更简单、更高效、更正确的替代方案。每个不必要的“useEffect”都会引入额外的渲染周期，增加错误的风险（过时的闭包、竞争条件、无限循环），并使组件更难以推理。 **黄金法则：**效果用于**与外部系统同步**（DOM API、计时器、Websocket、第三方小部件）。如果您正在做的工作是对用户事件的响应，或者可以根据现有状态/道具进行计算，则不需要效果。 ** ** ## 1\.导出状态——只需计算即可最常见的“useEffect”反模式：将一个值存储在可以从其他状态或道具计算得出的状态中。 // 🔴 BAD：冗余状态 + 不必要的 Effect 函数形式（）{ const [firstName, setFirstName] = useState('泰勒'); const [lastName, setLastName] = useState('Swift'); const [fullName, setFullName] = useState(''); 使用效果（（）=> { setFullName(名字 + ' ' + 姓氏); }, [名字, 姓氏]); 返回{fullName}; } 每次“firstName”或“lastName”更改时，这都会导致**两次渲染：一个使用过时的“fullName”，另一个在 Effect 更新后渲染。 // ✅ 好：在渲染期间计算函数形式（）{ const [firstName, setFirstName] = useState('泰勒'); const [lastName, setLastName] = useState('Swift'); // 派生 — 无状态，无效果，一次渲染 const 全名 = 名字 + ' ' + 姓氏；返回{fullName}; } 对于 **昂贵的计算** ，请包装在 `useMemo` 中而不是存储在状态中： // ✅ 好：记住昂贵的推导函数 TodoList({ 待办事项, 过滤器 }) { const [newTodo, setNewTodo] = useState(''); // 仅当 todos 或过滤器更改时重新计算，而不是当 newTodo 更改时重新计算 constvisibleTodos = useMemo( () => getFilteredTodos(todos, 过滤器), [待办事项、过滤器] ）；返回

{todo.text}

; } ** ** ## 2\.事件驱动逻辑——使用事件处理程序如果代码应该运行**因为用户做了某事**（单击、提交、键入），那么它属于事件处理程序，而不是效果。效果运行是因为组件 **渲染** ，而不是因为用户采取了操作。 // 🔴 不好：由 Effect 中的状态更改触发特定于事件的逻辑函数 ProductPage({ 产品, addToCart }) { 使用效果（（）=> { if (产品.isInCart) { showNotification(`已将 ${product.name} 添加到购物车！`); } }, [产品]); 函数handleBuyClick() { 添加到购物车（产品）； } // ... } 这是有问题的：如果产品已经在购物车中，则在页面重新加载时会触发通知。 // ✅ 好：副作用属于导致它们的事件处理程序函数 ProductPage({ 产品, addToCart }) { 函数购买产品（）{ 添加到购物车（产品）； showNotification(`已将 ${product.name} 添加到购物车！`); } 函数handleBuyClick() { 购买产品（）； } 函数handleCheckoutClick() { 购买产品（）；导航到（'/结帐'）； } // ... } **经验法则：** 如果您可以指出应触发代码的确切用户交互，请将其放入该交互的事件处理程序中。 ** ** ## 3\.效果链——合并到事件处理程序中每个基于其他状态的设置状态都会产生连锁效应，从而产生一系列不必要的重新渲染和僵化、脆弱的代码。 // 🔴 不好：效果链互相触发（4 个渲染通道！）函数游戏（）{ const [card, setCard] = useState(null); const [goldCardCount, setGoldCardCount] = useState(0); const [round, setRound] = useState(1); const [isGameOver, setIsGameOver] = useState(false); 使用效果（（）=> { if (card !== null && card.gold) { setGoldCardCount(c => c + 1); } }, [卡]); 使用效果（（）=> { 如果（金卡计数> 3）{ setRound(r => r + 1); 设置金卡计数（0）； } }, [金卡计数]); 使用效果（（）=> { if (回合 > 5) setIsGameOver(true); }, [回合]); // ... } // ✅ 好：尽你所能，在事件处理程序中计算其余部分函数游戏（）{ const [card, setCard] = useState(null); const [goldCardCount, setGoldCardCount] = useState(0); const [round, setRound] = useState(1); // 派生 — 不需要状态 const isGameOver = 回合 > 5; 函数handlePlaceCard(nextCard) { if (isGameOver) throw Error('游戏已经结束。'); setCard(下一张卡); 如果（nextCard.gold）{ if (goldCardCount < 3) { setGoldCardCount(goldCardCount + 1); } 否则{ 设置金卡计数（0）； setRound(圆+1); if (round === 5)alert('好游戏！'); } } } // ... } ** ** ## 4\.数据获取——使用数据获取库在“useEffect”中获取数据很脆弱。您必须手动处理竞争条件、加载状态、缓存、错误处理和清理。原始 `useEffect` 获取**无缓存、无重复数据删除、无 SSR 支持**。 // 🔴 不好：在 useEffect 中手动获取 — 竞争条件、无缓存、无 SSR 函数搜索结果（{查询}）{ const [结果，setResults] = useState([]); const [isLoading, setIsLoading] = useState(false); 使用效果（（）=> { 让忽略=假； setIsLoading(true); fetchResults(查询).then(json => { 如果（！忽略）{ 设置结果（json）； setIsLoading(假); } }); return () => { 忽略 = true; }; }, [查询]); // ... } // ✅ 好：使用 TanStack 查询（或您框架的数据原语）从'@tanstack/react-query'导入{useQuery}；函数搜索结果（{查询}）{ const { 数据: 结果 = [], isLoading } = useQuery({ queryKey: ['搜索', 查询], queryFn: () => fetchResults(查询), 启用：！！查询， }); // 自动缓存、重复数据删除、竞争条件处理、 // 后台重新获取和 SSR 支持 — 免费。 } **其他好的选择：** * **Next.js / Remix：** `loader` 函数，服务器组件，`use()` \+ Suspense * **SWR:** `useSWR(key, fetcher)` — 类似于 TanStack Query * **tRPC：** 具有内置 React 查询集成的端到端类型安全获取如果您**必须**使用`useEffect`来获取（无框架，无库），至少： 1.添加“ignore”清理标志以防止竞争条件 2. 将逻辑提取到可重用的自定义挂钩中（例如 `useData(url)`） 3. 显式处理加载、错误和空状态 ** ** ## 5\.外部存储订阅 — 使用 `useSyncExternalStore` 使用 `useEffect` \+ `setState` 订阅外部数据源（浏览器 API、第三方商店、observable）既繁琐又可能导致并发模式下的撕裂。 // 🔴 不好：使用 useEffect 手动订阅函数在线状态（）{ const [isOnline, setIsOnline] = useState(navigator.onLine); 使用效果（（）=> { const handleOnline = () => setIsOnline(true); const handleOffline = () => setIsOnline(false); window.addEventListener('在线',handleOnline); window.addEventListener('离线',handleOffline); 返回（）=> { window.removeEventListener('在线',handleOnline); window.removeEventListener('offline',handleOffline); }; }, []); 返回{是否在线？ '✅ 在线' : '❌ 离线'}; } // ✅ 好：useSyncExternalStore — 并发安全，代码更少从'react'导入{useSyncExternalStore}；函数订阅（回调：（）=> void）{ window.addEventListener('在线', 回调); window.addEventListener('离线', 回调); 返回（）=> { window.removeEventListener('在线', 回调); window.removeEventListener('离线', 回调); }; } 函数 getSnapshot() { 返回 navigator.onLine； } 函数在线状态（）{ const isOnline = useSyncExternalStore(订阅, getSnapshot); 返回{是否在线？ '✅ 在线' : '❌ 离线'}; } 对于状态管理库，请使用其内置的 React hook，而不是手动订阅。请参阅react-render-performance技能，了解使用XState、Zustand、Redux和Nanostore的基于选择器的模式。 ** ** ## 6\.在 Prop 更改时重置状态 - 使用“key” 当 prop 更改时，不要使用 `useEffect` 来重置状态。 React 有一个内置机制：“key”属性。 // 🔴 不好：重置 Effect 中的状态函数 EditProfile({ userId }) { const [comment, setComment] = useState(''); 使用效果（（）=> { 设置注释(''); }, [用户ID]); return

setComment(e.target.value)} />;
    }
    
    
    
    // ✅ 好：使用 key 重置组件状态
    函数个人资料页面({ userId }) {
      // 当 userId 改变时，React 会卸载旧的 EditProfile 并挂载一个新的
      返回 <EditProfile userId={userId} key={userId} />;
    }
    
    函数 EditProfile({ userId }) {
      const [comment, setComment] = useState('');
      return <textarea value={comment} onChange={e => setComment(e.target.value)} />;
    }

** **

## 当 `useEffect` 正确时

Effects 适合将你的组件与 **React** 之外的东西同步：

使用案例|为什么它是正确的  
---|---  
集成非 React 小部件（地图、图表、视频播放器）|同步 React 状态 → 命令式 DOM API  
设置 WebSocket 或 EventSource 连接 |与组件相关的外部系统生命周期  
测量 DOM 布局（`getBoundingClientRect`、`ResizeObserver`）|读取渲染后 DOM 信息  
强制管理焦点或滚动位置 |命令式 DOM 交互  
连接到硬件 API（相机、地理定位）|具有订阅/清理功能的外部系统  
`document.title` 或其他全局副作用 |同步 React 状态 → 浏览器 API  
  
即使对于这些，也要考虑一个库是否已经处理它（例如“react-intersection-observer”、“framer-motion”）。

** **

## 决策流程图

在编写“useEffect”之前问自己这些问题：

1. **我可以根据现有的 props/state 来计算它吗？** → 在渲染期间导出它（或 `useMemo`）。
  2. **这是对用户操作的响应吗？** → 将其放入事件处理程序中。
  3. **我正在获取数据吗？** → 使用 TanStack Query、SWR 或您框架的数据原语。
  4. **我是否订阅外部存储？** → 使用 `useSyncExternalStore` 或库的钩子。
  5. **当 prop 更改时我是否重置状态？** → 使用 `key` 属性。
  6. **我是否与 React 无法控制的外部系统同步？** → ✅ 这是一个有效的 `useEffect`。

** **

## 摘要清单

* 没有`useEffect`设置从其他状态/道具派生的状态 - 而是在渲染期间计算
  * 没有“useEffect”来运行逻辑来响应用户事件——而是使用事件处理程序
  * 没有通过状态更新相互触发的“useEffect”链——合并到事件处理程序或派生值中
  * 没有用于数据获取的原始“useEffect”——使用 TanStack Query、SWR 或框架数据原语
  * 外部存储订阅没有 `useEffect` \+ `setState` — 使用 `useSyncExternalStore` 或库钩子
  * 当道具改变时，没有 `useEffect` 来重置状态——使用 `key` 道具
  * 每个剩余的 `useEffect` 都与真正的外部系统（DOM API、WebSocket、第三方小部件）同步</article></body></html>

不使用 使用效果

包含技能

不使用使用效果