SuperAPI AI 工具集

react-useeffect

前端与建站

查看项目

更新于 10-16 02:34

技能介绍

用途:该技能围绕 React 的 useEffect 提供最佳实践指导,核心观点是“你可能并不需要 Effect”。Effect 是 React 的逃生舱,用于与外部系统同步;若不涉及外部系统,通常不应使用 Effect。

主要能力:给出常见场景的对照建议——由 props/state 派生状态时应在渲染期计算,而非 useState + useEffect;昂贵计算用 useMemo 缓存,而非 useEffect;props 变化需重置状态时用 key prop,而非 useEffect 配合 setState;响应用户事件时直接用事件处理器,而非 useEffect 监听状态;通知父组件变化时在事件处理器中调用,而非 useEffect 调用 onChange;数据获取应带清理逻辑或使用框架内置机制,而非无清理的 useEffect。

何时确实需要 Effect:与外部系统同步(非 React 组件、浏览器 API);订阅外部 store(尽量用 useSyncExternalStore);因组件显示而运行的埋点/日志;带正确清理的数据获取。

决策树:需要响应某事时——用户交互(点击、提交、拖拽)用事件处理器;组件出现在屏幕上用 Effect(外部同步、埋点);props/state 变化需派生值则在渲染期计算,昂贵时用 useMemo;props 变化需重置状态则用 key prop。

限制:资料未提供安装命令、代码示例细节、收费或平台信息,暂未提供。