SuperAPI AI 工具集

react

前端与建站

查看项目

更新于 10-16 02:35

技能介绍

用途:这是一份 React 基础与性能模式参考,帮助判断何时需要 useEffect、如何避免不必要的重渲染,以及如何做有针对性的性能优化。核心观点是 Effect 只是与外部系统同步的逃生舱,若无外部系统通常不需要;性能优化应先测量再针对可测瓶颈,而非到处 memo 化。

主要能力:给出 useEffect 决策树,区分派生状态、事件响应、数据获取与浏览器 API、第三方组件、网络连接、日志等场景;演示派生状态在渲染期直接计算、事件逻辑放在事件处理器中;说明 useMemo 仅用于昂贵计算或维持依赖引用相等,useCallback 仅用于已 memo 的子组件;介绍稳定引用、并行请求 Promise.all、useTransition 处理非紧急更新、useState 惰性初始化、用 Set/Map 做 O(1) 查找。

使用方式:按文档中的正反例对照修改代码,例如把 useEffect 中的派生状态改为渲染期计算,把顺序 await 改为 Promise.all,把数组 includes 改为 useMemo 包裹的 Set。文档还列出常见错误与修正对照表。

适用场景与限制:适合 React 组件性能审查与重构。数据获取、表单、URL 状态、错误边界、全栈流程等被委托给 tanstack-query、tanstack-form、tanstack-router、error-boundaries、integration-patterns 等技能;优化后建议交由 code-reviewer 代理审查。文档未提供安装命令、版本要求或收费信息。