用 React `＜Activity＞` 组件管理显隐切换：在 Langfuse 前端保留昂贵组件的状态与 DOM

用 ReactActivity组件管理显隐切换在 Langfuse 前端保留昂贵组件的状态与 DOM【免费下载链接】langfuse Open source AI engineering platform: LLM evals, observability, metrics, prompt management, playground, datasets. Integrates with OpenTelemetry, LangChain, OpenAI SDK, LiteLLM, and more. YC W23项目地址: https://gitcode.com/GitHub_Trending/la/langfuseActivity是 React 19.2 起提供的显隐原语它以modevisible | hidden声明式地隐藏子树同时保持组件挂载、状态与 DOM 完整保留。本文基于 Langfuse 仓库内置的 Vercel React Best Practices 技能包中rendering-activity规则rendering-activity.md讲清楚该规则解决什么问题、如何正确使用、底层行为是什么以及在什么场景下应当克制使用帮助你为下拉菜单、标签页、手风琴等高频率显隐切换的昂贵组件写出既快又不丢状态的 UI。规则出处Vercel React Best Practices 技能包中的rendering-activityLangfuse 仓库在web/.agents/skills/vercel-react-best-practices/目录下内置了一份由 Vercel 工程团队维护的 React / Next.js 性能优化指南共 57 条规则、8 大类别按影响程度分级专供编写、评审或重构 React 组件时参考见 SKILL.md。rendering-activity归属于Rendering Performance渲染性能类别影响级别为MEDIUMImpact 描述为preserves state/DOM保留状态与 DOM前缀为rendering-。在完整版编译文档 AGENTS.md 的第 6.7 节中该规则被进一步阐述为Use ReactsActivityto preserve state/DOM for expensive components that frequently toggle visibility.使用 React 的Activity为频繁切换可见性的昂贵组件保留状态与 DOM。这条规则的核心诉求有两个避免昂贵的重复渲染以及避免显隐切换过程中的状态丢失。Activity是什么React 19.2 的显隐原语Activity是 React 官方从react包直接导出的组件Langfuse 前端恰好运行在支持它的 React 版本上——web/package.json 声明了react: 19.2.4Next.js 版本为16.3.3见 web/package.json。React 19.2 将此前以Offscreen实验形态存在的机制以稳定 API 形式落地因此以下代码可直接编译运行import { Activity } from react function Dropdown({ isOpen }: Props) { return ( Activity mode{isOpen ? visible : hidden} ExpensiveMenu / /Activity ) }mode属性只有两个取值取值含义visible子节点正常渲染并可见等价于常规渲染hidden子节点被隐藏但仍然挂载在组件树中状态与 DOM 被保留为什么需要它条件渲染的代价很多开发者习惯用条件渲染来实现显隐function Dropdown({ isOpen }: Props) { return isOpen ? ExpensiveMenu / : null }这种写法的问题是isOpen每次切换都会导致ExpensiveMenu卸载再重新挂载。对一个渲染代价高昂的组件大量节点、图表、编辑器、长列表来说这意味着状态丢失组件内部通过useState持有的展开/折叠、滚动位置、表单草稿、查询条件等全部归零每次打开都要重新初始化昂贵的重建开销DOM 树销毁再重建、事件监听重新绑定、useEffect重新执行可能触发新的数据请求或动画重新渲染成本即便父组件没有其他状态变化切换动作本身也会触发一次完整的卸载/挂载周期。规则文档对此的总结只有一句话但含义极深“Avoids expensive re-renders and state loss.”避免昂贵的重复渲染与状态丢失。这正是Activity的适用场景——组件渲染昂贵、且可见性切换频繁。规则核心用法以 Dropdown 为例的完整实现规则文件给出的最小示例是一个下拉菜单。展开为带注释的完整写法如下import { Activity } from react interface Props { isOpen: boolean } function Dropdown({ isOpen }: Props) { return ( Activity mode{isOpen ? visible : hidden} ExpensiveMenu / /Activity ) }从源码行为推断modehidden时 React 将子树以隐藏方式呈现如同display: none但子组件不会被卸载其内部状态、ref、DOM 节点都原样保留当mode切回visible时组件立即恢复显示无需重新执行渲染初始化。由于隐藏子树不会因父级无关状态更新而重新渲染频繁的显隐切换也不再为昂贵的子树买单。该模式同样适用于其他“重复开关”型交互// 标签页保持每个面板的状态 function Tabs({ activeTab }: { activeTab: overview | settings }) { return ( Activity mode{activeTab overview ? visible : hidden} OverviewPanel / /Activity // 注意多个面板可分别用 Activity 包裹或用一个 Activity 包裹后按需切换 ) } // 手风琴 / 可折叠分组 function AccordionItem({ expanded }: { expanded: boolean }) { return ( Activity mode{expanded ? visible : hidden} ExpensiveDetails / /Activity ) }原理深挖hidden状态下到底发生了什么结合 React 19.2 的公开行为与规则文档的表述可以梳理出Activity modehidden的几条核心语义保持挂载子组件不会从组件树中移除useState、useRef、组件实例都持续存活保留 DOM已有的 DOM 节点不被销毁避免重建开销因此隐藏后再次显示几乎没有额外成本避免重复渲染隐藏子树对父级的状态更新“免疫”父组件重渲染时不会连带渲染隐藏的昂贵子树这正是“避免昂贵 re-render”的机制来源与条件渲染互补条件渲染isOpen ? Menu / : null适合“首次打开才创建、关闭后彻底回收”的场景Activity适合“反复开关、每次打开都希望秒回”的场景。换言之Activity把“DOM 保留”从 CSS 层手写display: none提升到了 React 声明式层面让框架在调度层面直接理解“这段子树当前不可见”从而获得跳过渲染优化的空间而不是让子树空跑一遍渲染逻辑后再靠样式藏起来。仓库现状Langfuse 前端中同类显隐切换的真实场景Activity的价值可以从 Langfuse 前端已有的显隐切换代码中得到侧面印证。例如 PrettyJsonView.tsx 在“表格视图 / JSON 视图”之间切换时就是直接通过内联样式切换两个视图容器的可见性style{{ display: shouldUseTableView ? flex : none }} style{{ display: shouldUseTableView ? none : block }}这正是一种“显隐切换但希望保留内容”的典型模式——两个视图同时保留在 DOM 中用display: none藏起非激活视图。Activity mode{shouldUseTableView ? visible : hidden}可以作为这种手写display: none模式的声明式替代把可见性语义交给 React 统一调度。仓库中的注释也印证了display: none模式的固有边界data-table-controls.tsx 提到“a query left behind by a hidden input”——display: none的元素仍然占据组件树中的位置、仍可能影响查询逻辑只是不产生布局盒。使用Activity时同样需要注意隐藏内容只是不可见并不会从内存或组件树中消失。使用边界与注意事项规则文档将影响级别定为 MEDIUM意味着这是一个“按需选用”的优化手段而非无条件替换所有条件渲染。需要注意内存占用modehidden的内容始终驻留内存。对超大列表、海量日志这类节点数惊人的内容保留 DOM 反而得不偿失——这类场景应优先配合 CSScontent-visibility同技能包rendering-content-visibility规则或虚拟滚动而不是依赖Activity。几何测量失效隐藏子树不参与布局对其中元素调用getBoundingClientRect()等测量 API 会得到零尺寸。若隐藏内容需要在显示瞬间做精确布局如定位弹层、计算滚动条仍需在visible之后再测量。首次渲染成本不变Activity优化的是“反复切换”的成本第一次显示时子树仍要正常渲染。如果某个组件 99% 的时间都不需要出现条件渲染isOpen ? X / : null让它在首次打开时才创建反而更省。与rendering-conditional-render规则协同同技能包的rendering-conditional-render规则提醒开发者避免用渲染可能为0/NaN的值而rendering-activity提醒的是“当条件渲染导致昂贵的卸载/挂载时改用Activity”。二者共同构成完整的显隐决策先确保条件表达式正确再判断该保留还是该回收。小结何时使用Activity决策清单场景推荐方案昂贵组件图表、编辑器、复杂菜单被频繁开关希望保留滚动位置、表单草稿等状态Activity modevisible/hidden组件渲染极廉价、或几乎只会打开一次条件渲染isOpen ? X / : null海量节点的长列表显隐虚拟滚动 / CSScontent-visibility需要隐藏时彻底释放内存与事件监听条件渲染卸载核心判断标准只有一条这个组件切换可见性的频率值不值得保留它的状态与 DOM值得就用Activity——它是 React 19.2 为这类高频显隐场景提供的官方答案。完整规则原文可查阅 rendering-activity.md技能包全貌见 SKILL.md规则细节的完整编译版见 AGENTS.md。【免费下载链接】langfuse Open source AI engineering platform: LLM evals, observability, metrics, prompt management, playground, datasets. Integrates with OpenTelemetry, LangChain, OpenAI SDK, LiteLLM, and more. YC W23项目地址: https://gitcode.com/GitHub_Trending/la/langfuse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考