人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载导读本文基于 ZCode 仓库内置的 React 性能优化规则集.agents/skills/react-best-practices/rules/rendering-activity.md系统讲解如何使用 React 的Activity组件替代“卸载再挂载”式的显示/隐藏方案为频繁切换可见性的昂贵组件保留 DOM 与组件状态从而避免无谓的重渲染与状态丢失。读完本文你将掌握modevisible / hidden的完整用法、与条件渲染conditional rendering、CSS 可见性方案的取舍标准以及该规则在 ZCode 的 React 19.2 工程中的落地前提。一、规则全景这是一条渲染性能类 MEDIUM 影响规则在 ZCode 内置的 react-best-practices 技能中来自 Vercel 团队的 70 条性能优化规则被划分为 8 个优先级类别waterfall 消除、包体优化、服务端性能、客户端数据获取、重渲染优化、渲染性能、JavaScript 微优化、高级模式。本文讨论的rendering-activity属于第 6 类「Rendering Performance」类别前缀为rendering-影响等级为MEDIUM。规则文件头部元数据给出了本条规则的完整定位元数据字段值titleUse Activity Component for Show/HideimpactMEDIUMimpactDescriptionpreserves state/DOM保留状态与 DOMtagsrendering, activity, visibility, state-preservation其核心主张一句话即可概括对于“频繁切换可见性”且“渲染成本高”的组件用 React 的Activity来包裹而不是反复卸载再挂载。该技能目录.agents/skills/react-best-practices/README.md说明这些规则文件均由 Vercel 工程师维护、以 MIT 协议随仓库内置分发示例用于展示框架模式具体是否适用需结合目标应用的框架与运行环境判断。二、问题背景show/hide 为什么会有状态丢失与昂贵重渲染在典型的 React 界面中实现“显示/隐藏”通常有两种朴素做法而它们都有各自代价做法一条件卸载conditional mount{isOpen ExpensiveMenu /}组件在isOpen为false时被完全卸载。代价是状态丢失菜单内部的滚动位置、输入草稿、展开的子节点、缓存的计算结果全部随卸载销毁再次展开时需要从头重建重建成本再次挂载时重新执行组件函数体、重新运行 effect、重新触发昂贵的计算与网络请求。做法二CSS 隐藏display: none/visibility: hidden虽然保留了 DOM 与状态但在 React 的数据流模型下只要父组件因isOpen等状态变化而重渲染被隐藏的子树依然会参与正常的 reconcile 流程——子组件若未做 memo 等优化依然会被重新渲染昂贵的渲染开销并未真正省去。需要区分的是display: none是浏览器层面的“不绘制”而 React 仍可能对子树执行渲染与 diff。真正意义上的“跳过渲染”需要框架级支持。Activity正是面向这一场景它在框架层面把子树的渲染调度与可见性解耦——隐藏时子树的 React 渲染可以被打断或推迟而子树依然保持挂载从而同时避免昂贵的重渲染和状态丢失。三、核心用法Activity的可见/隐藏双模式规则文件给出了最小可运行的用法示例这也是本文的骨架代码import { Activity } from react; function Dropdown({ isOpen }: Props) { return ( Activity mode{isOpen ? visible : hidden} ExpensiveMenu / /Activity ); }在此基础上结合实践可以补充几个要点mode属性是显式的可见性开关visible表示子树正常渲染并可见hidden表示子树保持挂载、状态保留但不渲染为可见内容。把isOpen布尔值映射为mode字符串是该组件最典型的接入方式。children是需要保活的昂贵子树Activity并不关心被包裹内容是什么它只负责为子树提供“可见/隐藏”两种渲染调度状态。适合包裹的典型对象包括下拉菜单、命令面板、侧滑抽屉、可折叠面板、标签页内容、搜索结果的次级面板等。引入方式Activity直接从react包导入无需第三方依赖。3.1 在 ZCode 中的适用前提React 19.2Activity是随 React 19 引入的能力。ZCode 的 UI 工程在 packages/ui/package.json 中声明依赖react: ^19.2.0因此当前仓库的 UI 代码可以直接使用import { Activity } from react导入该组件。如果项目后续需要降级 React 主版本则应先确认目标版本是否提供Activity否则退回条件渲染方案。3.2 一个更完整的实战变体把下拉菜单场景展开成贴近真实产品的写法import { Activity } from react; interface DropdownProps { isOpen: boolean; } function Dropdown({ isOpen }: DropdownProps) { return ( div classNamedropdown button aria-expanded{isOpen} aria-haspopupmenu More actions /button Activity mode{isOpen ? visible : hidden} {/* 内部包含昂贵内容长列表、图表、受控表单等 */} ExpensiveMenu / /Activity /div ); }对比条件卸载版// 不推荐每次开关都卸载/重建 ExpensiveMenu function Dropdown({ isOpen }: DropdownProps) { return ( div classNamedropdown button aria-expanded{isOpen}More actions/button {isOpen ExpensiveMenu /} /div ); }两者视觉结果一致但前者在频繁开合时保留了ExpensiveMenu的内部状态如滚动位置、已输入内容、已展开分支且隐藏期间子树不参与常规渲染路径这是该规则带来的两个核心收益。四、为什么它能“避免昂贵的重渲染和状态丢失”规则正文对收益的描述非常简洁Avoids expensive re-renders and state loss。结合 React 的渲染模型可以这样理解状态保留hidden模式下子树没有被卸载组件实例、useState/useReducer的值、useRef指向的 DOM 节点都继续存在再次切回visible时不需要重建渲染节省隐藏期间 React 可以将该子树的渲染标记为低优先级甚至跳过常规同步渲染从而把宝贵的帧预算留给用户正在交互的部分DOM 稳定子树的 DOM 节点不被销毁也就避免了大量节点重建引发的布局抖动layout thrashing与回流开销。从源码结构看这套机制是框架内部对“屏幕外内容offscreen content”渲染调度的一种组件化暴露Activity相当于把这一底层能力封装成了声明式的mode属性让业务组件无需感知内部调度细节。需要说明的是该组件面向的是“频繁开关”的交互场景其收益随开关频率与子树成本的上升而放大。五、什么时候该用、什么时候不该用Activity并非银弹。规则强调适用对象是“频繁切换可见性”且“渲染昂贵”的组件两个条件缺一不可推荐使用Activity高频开关的下拉菜单、命令面板、弹出层标签页/手风琴内容中渲染成本高的面板需要记住用户交互现场滚动位置、草稿、展开态的次级视图开合频繁且重建成本可感知的复杂组件。不必使用Activity内容轻量、几乎无状态、开关频率很低的组件——直接条件渲染即可避免引入不必要的复杂度只在挂载时加载一次、生命周期内从不隐藏的内容。值得注意的是条件渲染本身仍是 React 中最常见的显示/隐藏手段两者并不互斥。配套规则 rendering-conditional-render.md 从另一角度提醒无论采用哪种方案都应避免用直接拼接数字或NaN条件例如{count ...}在count 0时会渲染出0显式三元表达式count 0 ? ExpensiveMenu / : null才是更稳妥的条件渲染写法。而Activity的mode本身是显式字符串取值天然避开了这类 falsy 值误渲染问题。六、把规则放进 ZCode 技能体系的上下文rendering-activity不是孤立的一条笔记而是 ZCode 内置技能框架的一部分SKILL.md定义技能的触发时机编写、评审或重构 React/Next.js 代码时以及 8 类规则的优先级排序本规则归入第 6 类rules/ 目录存放 70 条独立规则文件每条规则按_template.md的结构组织frontmatter 元数据 规则正文 正反例代码_sections.md定义各规则的类别、影响等级与描述rendering类别的影响等级为 MEDIUM定位是“优化渲染过程、减少浏览器需要做的工作”AGENTS.md所有规则的合并参考文档。因此本文中的规则同样适用于两种使用场景一是 ZCode UI 开发者书写/评审 React 组件时按此模式保活昂贵子树二是使用该技能驱动编码助手Agent时让其在生成代码时优先选用Activity而非卸载重建式的开关逻辑。七、落地检查清单在 ZCode 的 React 工程中引入本规则时建议按以下清单自查确认 React 版本packages/ui/package.json中react为^19.2.0满足Activity的导入前提确认组件确实昂贵子树是否包含长列表、图表、复杂表单或频繁重渲染的派生计算若重建成本低则直接条件渲染确认开关确实频繁交互是否会短时间内多次开合若低频则Activity收益有限用mode显式表达可见性mode{isOpen ? visible : hidden}避免依赖 falsy 值隐式转换保留状态语义确认隐藏期间需要保留的状态滚动位置、草稿、展开分支确实不应随隐藏销毁同步更新可访问性属性Activity负责渲染调度aria-expanded、hidden等可访问性语义仍需在业务层正确维护。小结Activity是 React 为“频繁开关的昂贵组件”提供的框架级保活方案通过modevisible/hidden在保留子树 DOM 与状态的同时跳过无谓的渲染工作。在 ZCode 的 React 19.2 UI 工程中这条来自内置技能规则的实践可以直接落地而它与条件渲染、content-visibility参见 rendering-content-visibility.md面向长列表的 CSS 级优化共同构成了“渲染性能”类别中不同层级的优化工具箱——选择哪种方案始终取决于组件的成本与开关频率。赞分享人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载相关推荐ZCode 前端性能指南用 React Activity 组件实现显示/隐藏时的状态与 DOM 保持ZCode 前端性能指南用 React Activity 组件实现显示/隐藏时的状态与 DOM 保持 本文基于 ZCode 仓库内 Vercel ReactOpenMetadata 前端渲染优化用 React Activity 组件实现显示/隐藏并保留状态与 DOMOpenMetadata 前端渲染优化用 React Activity 组件实现显示/隐藏并保留状态与 DOM 导读 在 OpenMetadata 这类数据治数据目录数据血缘数据治理后端MCP 服务保留状态与 DOM在 Phoenix 前端用 React Activity 组件优化显示/隐藏渲染性能保留状态与 DOM在 Phoenix 前端用 React Activity 组件优化显示/隐藏渲染性能 本文聚焦当前仓库收录的 Vercel React 最可观测性AI 评测LLMOpsAI 应用人工智能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考