用途:这是一份关于 React useEffect 正确用法的指南,核心观点是 Effect 是 React 用于与外部系统同步的“逃生舱”,删除不必要的 Effect 可让代码更易读、运行更快、更少出错。适用于编写、审查或重构使用 useEffect 的 React 组件。
主要能力:明确何时该用 Effect(与外部系统同步,如非 React 组件、网络、浏览器 DOM;组件展示时的分析上报;带竞态清理的数据获取)与何时不该用(为渲染转换数据、处理用户事件、基于其他 state 更新 state)。提供决策树:代码为何运行——组件展示用 Effect、用户操作用事件处理器、可由 props/state 算出则在渲染期间计算。
使用方式:按反模式对照表改写。派生状态直接在渲染中计算;昂贵计算用 useMemo(用 console.time()/console.timeEnd() 测量,≥1ms 再记忆化);props 变化重置 state 用 key;仅调整部分 state 改为渲染中派生;事件逻辑放进事件处理器;提交表单在处理器中 post;避免 Effect 链,在处理器中一次性计算并更新;应用初始化用模块级变量或守卫避免开发环境运行两次;通知父组件在处理器中同时更新或提升 state;数据获取由父组件进行并向下传递;外部存储订阅用 useSyncExternalStore;数据获取需用 ignore 标志在清理函数中忽略过期响应。
适用场景与限制:面向使用 React 函数组件与 useEffect 的开发者,以“何时该用/不该用 + 决策树 + 反模式对照”的方式给出规范;资料未提供具体版本要求、安装方式或工具链集成说明。