SuperAPI AI 工具集

react-best-practices

前端与建站

查看项目

更新于 10-16 01:12

技能介绍

用途:这是一套客户端 React 性能优化模式,用于排查和改善组件重渲染、打包体积、useEffect/useMemo 使用等问题,适用于性能优化任务。

主要能力:规则按影响程度分类。打包优化(关键)包括从源文件而非 barrel index.ts 导入、用 React.lazy + Suspense 做代码分割与延迟加载第三方、预加载关键资源。重渲染预防(高)包括记忆化昂贵计算、精简 hook 依赖数组、在渲染期而非 effect 中计算派生状态、用 setState(prev => ...) 避免过期闭包、useState(() => expensive()) 惰性初始化、不记忆化平凡表达式、用 useTransition 处理非紧急更新、在回调而非渲染期读取 URL 参数或存储。渲染(中)包括用 && / 三元短路条件渲染、把静态 JSX 提升到组件外、用 CSS content-visibility: auto、用 <Activity> 处理隐藏 UI、包裹动画 SVG 隔离重渲染、限制 SVG 坐标精度。异步(中)包括细粒度 Suspense 边界、不 await 非阻塞工作、并行加载依赖。JavaScript(中)包括模块级 Map 缓存、批量 DOM 读写避免布局抖动、预索引数组为 Map 实现 O(1) 查找、先检查 .length、用 .toSorted()/.toReversed() 做不可变转换;正则提升由 Biome 的 useTopLevelRegex 强制。浏览器(中)包括在 useEffect 返回中清理事件监听、为滚动/触摸处理器加 { passive: true }。高级(低)包括稳定回调 ref 避免子组件重渲染、useLatest 模式在回调中获取最新值。

使用方式与限制:资料未提供具体安装命令、调用方式或配置步骤,暂未提供。规则以条目形式列出,需结合具体代码场景应用。