SuperAPI AI 工具集

react-anti-patterns

前端与建站

查看项目

更新于 10-15 20:05

技能介绍

用途:在审查 React 代码时,尤其是 AI 生成或初级开发者编写的代码,用来识别常见反模式。资料按检测难度组织,先列难发现的 bug,再列易发现的问题,共 18 项。

主要能力:难检测类包括陈旧闭包(异步或定时器中读到旧值,可用 useRef 保存当前值;若回调位于 effect 内,React 19.2+ 可用 useEffectEvent)、组件内定义组件导致每次渲染卸载重挂、状态重复导致不同步(只存 ID 再派生对象)。中等难度包括直接修改状态导致不重渲染、多个布尔状态造成组合爆炸(改用有限状态机或联合类型)、useCallback 未配合子组件 memo 等于无效、用 useEffect 把 props 同步进 state、单一巨型 Context 导致所有消费者重渲染、多个相关 useState 难以重置(改用对象或 useReducer)。易检测类包括用 useEffect 计算派生状态、缺少 useEffect 清理、动态列表用 key={index}、手写 fetch 而非 React Query、缺少加载/错误/空状态、条件调用 Hooks、用 && 判断数字导致渲染 0、上帝组件、React 18+ 自动批处理带来的意外(需要立即渲染时用 flushSync)。

使用方式:资料提供代码审查清单,逐项检查 useEffect 是否必要、是否有清理返回、effect 中 fetch 是否用 AbortController 或忽略标志、列表 key 是否稳定 ID、是否存在 props 镜像、useCallback/useMemo 接收方是否有 memo、服务端数据是否应交给 React Query、加载/错误/空/成功状态是否齐全、状态形状是否布尔爆炸、是否在组件内定义组件、闭包是否读到陈旧状态。

适用场景与限制:适合 React 代码评审与重构参考。资料未提供安装命令、收费、平台或效果信息,暂未提供。