用途:该技能用于在编写或审查 React 组件时判断是否真的需要 useEffect,把 React 官方“你可能不需要 Effect”的决策树与项目更严格的“不优先直接使用 useEffect”立场结合。
主要能力与判断顺序:先依次自问——能否在渲染时从 props 或 state 计算;是否由用户操作触发而应放入事件处理器;是否因标识变化需重置状态而应使用 key;是否是昂贵的纯计算而应使用 useMemo;是否是外部订阅而应使用 useSyncExternalStore 或专用自定义 hook;是否属于真正必须在挂载或依赖变化时进行的外部同步。前五种情况均不应写直接 useEffect。
常用做法:派生状态直接在渲染中计算;昂贵纯计算用 useMemo 记忆化;由点击、提交等引发的工作留在事件处理器;实体切换用 key 让内部组件重新挂载;数据获取优先使用项目数据层(如 Convex hooks)或查询库,必要时封装为自定义 hook 并处理过期响应;外部订阅用 useSyncExternalStore。若确实需要仅挂载一次的外部初始化(如 DOM 聚焦、第三方组件、浏览器 API 监听),可使用项目提供的 useMountEffect 包装器:import { useEffect } from "react"; export function useMountEffect(effect: () => void | (() => void)) { useEffect(effect, []); }。
适用场景与限制:适用于 React 组件编写与代码审查;核心限制是只有真实外部同步才允许 effect,若说不出在同步哪个外部系统,通常就不需要 effect。资料未提供安装命令、版本要求与配置细节。