用途:这是一份 React useEffect 使用准则,核心观点是「你可能不需要 Effect」。Effect 是 React 的逃生舱,用于与外部系统同步;若不涉及外部系统,通常不应使用 Effect。
主要能力(正误对照):
- 从 props/state 派生状态:不要 useState + useEffect,应在渲染期间计算。
- 昂贵计算:不要用 useEffect 缓存,应使用 useMemo。
- props 变化时重置状态:不要用 useEffect 配 setState,应使用 key prop。
- 响应用户事件:不要用 useEffect 监听 state,应直接在事件处理器中处理。
- 通知父组件变化:不要在 useEffect 中调用 onChange,应在事件处理器中调用。
- 数据请求:不要使用无清理的 useEffect,应使用带清理的 useEffect 或框架内置机制。
确实需要 Effect 的场景:与外部系统同步(非 React 组件、浏览器 API)、订阅外部存储(尽量用 useSyncExternalStore)、因组件显示而运行的埋点/日志、带正确清理的数据请求。
不需要 Effect 的场景:为渲染转换数据(顶层计算即可自动重跑)、处理用户事件(用事件处理器)、派生状态(直接计算,如 const fullName = firstName + ' ' + lastName)、链式状态更新(在事件处理器中算出全部下一个状态)。
决策树:用户交互则用事件处理器;组件出现在屏幕上则用 Effect;props/state 变化需要派生值则在渲染期间计算,昂贵时用 useMemo;prop 变化需重置状态则用 key prop。
限制与说明:资料未提供安装命令、价格、平台支持或版本要求;内容为实践指导,非可执行工具。