AutoGPT 前端性能规范使用 React Activity 组件实现组件显隐时的状态与 DOM 保留【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT本文解析 AutoGPT 仓库中 Vercel React 最佳实践技能集vercel-react-best-practices里的一条渲染性能规则 rendering-activity对频繁切换显隐的高开销组件使用 React 的Activity组件替代条件卸载以保留内部状态与 DOM 树。读完后你将理解该规则解决的问题边界state loss 与昂贵重渲染、标准用法以及结合当前仓库依赖版本判断该 API 的可用性与落地时机。规则原文与标准用法该规则文件位于 rendering-activity.md其 frontmatter 元信息声明了规则的优先级定位title: Use Activity Component for Show/Hide impact: MEDIUM impactDescription: preserves state/DOM tags: rendering, activity, visibility, state-preservation即这是一条 MEDIUM中等影响力的渲染类规则收益点在于保留状态与 DOMpreserves state/DOM标签归入rendering / activity / visibility / state-preservation。规则给出的标准用法如下完整继承自原文档import { Activity } from react function Dropdown({ isOpen }: Props) { return ( Activity mode{isOpen ? visible : hidden} ExpensiveMenu / /Activity ) }核心语义只有一句话用mode属性visible | hidden切换子树的可见性而不是通过条件渲染把子树从 React 树中卸载。规则原文的收尾说明为 Avoids expensive re-renders and state loss.——避免昂贵的重渲染与状态丢失。同一条规则也以编译合并形式收录在技能集的完整文档 AGENTS.md 第 6.6 节 Use Activity Component for Show/Hide 中两处内容一致可互为引用。规则解决什么问题条件渲染的两个隐性代价要理解Activity的价值先明确它替代的写法是什么。传统的显隐实现通常是条件渲染function Dropdown({ isOpen }: Props) { if (!isOpen) return null return ExpensiveMenu / } // 或 {isOpen ExpensiveMenu /}当isOpen从false翻转为true时React 需要完整重新挂载ExpensiveMenu /子树这会带来两个被规则明确点名的代价状态丢失state loss子树卸载即意味着其内部所有useState、useRef、滚动位置、输入框内容、展开的折叠面板等全部重置。对经常开合的组件下拉菜单、搜索面板、抽屉用户每次打开都要重新初始化。昂贵的重渲染expensive re-renders重新挂载意味着重新执行整个子树的渲染与副作用初始化。如果子树是原文示例中的ExpensiveMenu这类重组件大量子节点、复杂列表、图表、富编辑器等频繁的 show/hide 会造成反复的全量子树构建。Activity mode{...}将可见性与挂载解耦子树始终保持挂载hidden模式下只是不再呈现。状态和 DOM 都被保留切换仅是模式变更而非卸载/挂载。规则将其影响力标记为 MEDIUM 而非 CRITICAL可以推断其适用场景是高频显隐 重子树这一特定组合而非所有条件渲染场景。在技能集中的位置rendering 类别的一条子规则该规则不是孤立存在的。SKILL.md 声明了整个技能集的结构45 条规则、8 个类别按影响力排序rendering-前缀属于第 6 类Rendering Performance渲染性能整体定级为 MEDIUM优先级类别影响力前缀1Eliminating Waterfalls消除瀑布流CRITICALasync-2Bundle Size Optimization打包体积优化CRITICALbundle-3Server-Side Performance服务端性能HIGHserver-4Client-Side Data Fetching客户端数据获取MEDIUM-HIGHclient-5Re-render Optimization重渲染优化MEDIUMrerender-6Rendering Performance渲染性能MEDIUMrendering-7JavaScript PerformanceJS 性能LOW-MEDIUMjs-8Advanced Patterns高级模式LOWadvanced-在rendering-类别内部rules 目录 中共有 7 条渲染规则rendering-activity与以下规则同组可对照选择rendering-conditional-render.md条件渲染用三元而非防止渲染出0或NaN——与rendering-activity互补前者治理要不要渲染后者治理渲染了但暂时不可见rendering-content-visibility.md长列表用 CSScontent-visibility跳过不可见区域的渲染开销rendering-hoist-jsx.md、rendering-svg-precision.md、rendering-animate-svg-wrapper.md、rendering-hydration-no-flicker.md。按 SKILL.md 的说明每条规则文件包含为什么重要、错误示例与解释、正确示例与解释、附加上下文四个部分rendering-activity属于其中较精简的一条核心信息即上文引用的用法示例与 preserves state/DOM 收益声明。结合当前仓库的适用性React 18 代码库中的前瞻性规则从源码结构看这条规则在 AutoGPT 当前代码库中应被视为前瞻性forward-looking规范而非立即可用的 API依据如下前端依赖锁定在 frontend/package.jsonreact: 18.3.1、react-dom: 18.3.1、next: 15.5.21。在当前仓库的 React 18.3.1 依赖版本下import { Activity } from react尚不可用因此对现有组件做 show/hide 优化仍需回到常规手段条件渲染、CSS 隐藏、content-visibility等并结合 rerender-memo 等规则控制重渲染成本。待依赖升级到提供Activity的 React 版本后该规则即可按上文示例直接落地。这一点也说明了该技能集在仓库中的真实定位它是面向未来重构与代码生成的性能规范清单SKILL.md 的 description 声明其在编写、评审或重构 React/Next.js 代码时触发而非描述当前代码库已经采用的实现。当前仓库中大量显隐类组件如 AgentActivityDropdown、MobileDrawer/copilot/components/MobileDrawer/MobileDrawer.tsx)仍采用条件挂载方式恰好是这条规则描述的目标改造场景一旦子树足够昂贵且开合频繁就是引入Activity模式的候选点。落地判断清单什么时候用 Activity什么时候不用结合规则原文的措辞expensive components thatfrequentlytoggle visibility落地时可按以下判断标准子树昂贵挂载/重挂载成本高深子树、复杂状态、外部实例初始化等——规则示例刻意命名为ExpensiveMenu即为此意显隐切换频繁如下拉、面板、标签页内容等用户可反复开关的场景一次性弹窗打开后很少再开收益有限状态值得保留子树内有输入内容、滚动位置、展开状态等用户可感知状态丢失它们会直接劣化体验依赖版本满足确认当前react版本已提供Activity具名导出当前仓库锁定 18.3.1尚不满足见上一节。不适用的场景子树很轻重新挂载几乎零成本、显隐由数据加载驱动且首次显示前无需占位、或隐藏后需要释放资源DOM、定时器、外部订阅。规则未覆盖这些边界从 preserves state/DOM 的收益声明可以推断其适用前提正是保留本身就是收益的场景。参考路径规则原文.claude/skills/vercel-react-best-practices/rules/rendering-activity.md技能集说明类别与优先级.claude/skills/vercel-react-best-practices/SKILL.md完整合并文档6.6 节.claude/skills/vercel-react-best-practices/AGENTS.md前端依赖版本autogpt_platform/frontend/package.json同组渲染规则.claude/skills/vercel-react-best-practices/rules/【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考