SuperAPI AI 工具集

react-best-practices

前端与建站

查看项目

更新于 10-15 21:47

技能介绍

用途:该技能提供 React 编码规范,核心原则是“Effect 是逃生舱”,用于与外部系统同步,而非处理普通组件逻辑。写 Effect 前应先问:能否不用 Effect 实现。

主要能力:说明何时该用 Effect(订阅浏览器 API 如 WebSocket、IntersectionObserver、resize;接入非 React 第三方库;在 window/document 上注册与清理事件监听;挂载时取数,但更推荐 React Query 或框架取数;控制非 React DOM 元素如播放器、地图、弹窗),以及何时不该用。

常见反模式与替代:派生状态应在渲染时直接计算,而非用 Effect 加 state;昂贵计算用 useMemo 缓存;props 变化需重置 state 时用 key;用户事件逻辑放事件处理器;通知父组件时在事件处理器中同时更新,或做成完全受控组件;避免 Effect 链,改为在事件处理器中计算派生状态并更新。

决策树:响应用户交互用事件处理器;由 props/state 计算值在渲染时算;缓存昂贵计算用 useMemo;props 变化重置 state 用 key;与外部系统同步用带清理的 Effect;Effect 中需要非响应式代码用 useEffectEvent;需要不触发渲染的可变值用 ref。

参考文档:按需加载 effect-dependencies.md(依赖数组、过期闭包、移除多余依赖)、effect-cleanup.md(清理函数、竞态、订阅)、refs.md(何时用 ref 代替 state、DOM ref、ref 回调)、custom-hooks.md(抽取逻辑、命名、hook 边界)、component-patterns.md(组合、key、状态提升、列表渲染)。

限制:资料未提供安装命令、版本要求、平台与收费信息,暂未提供。