前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载本文基于本仓库内 Vercel 工程团队维护的 React 性能最佳实践规则集.agents/skills/vercel-react-best-practices中rendering-activity规则系统讲解 ReactActivity组件在频繁显隐切换场景下的正确用法如何在隐藏昂贵组件时保留其内部状态与已渲染的 DOM从而避免重渲染开销与状态丢失。读完本文你将掌握Activity mode的 API 用法、它与此前条件渲染卸载方案的差异以及何时该用、何时不该用的判断标准可直接应用到下拉菜单、弹层、手风琴等高频开关类 UI 的优化中。规则来源与定位该规则文件位于仓库的 rendering-activity.md标题为Use Activity Component for Show/Hide。它的 frontmatter 声明了关键元信息title: Use Activity Component for Show/Hide impact: MEDIUM impactDescription: preserves state/DOM tags: rendering, activity, visibility, state-preservation在 Vercel React Best Practices 的 8 大分类体系中见 SKILL.md它归属于第 6 类Rendering Performance渲染性能前缀为rendering-。按照 metadata.json 的说明这套规则由 Vercel Engineering 于 2026 年 1 月发布版本 1.0.0每条规则都配有错误 vs 正确的对比示例、影响等级与明确的优化收益描述供自动化重构与代码生成参考。在 AGENTS.md由规则文件编译生成的完整文档中该规则被编排为第 6.7 节与 6.2 节CSS content-visibility for Long Lists、6.9 节Use Explicit Conditional Rendering等规则同属渲染性能板块。类别定义可参考 _sections.md第 6 类渲染性能的定位是优化渲染过程减少浏览器需要做的工作影响等级为 MEDIUM。核心问题显隐切换为何会丢状态、产生昂贵重渲染在 React 中最常见的显隐写法是条件渲染——通过if、三元表达式或直接决定子树是否出现在虚拟 DOM 中。当条件为假时React 会将该子树卸载unmount对应 DOM 被移除组件内的useState、useRef、滚动位置、焦点、已加载的数据等内部状态全部随之销毁当条件再次为真时子树被重新挂载mount需要从头初始化状态并重新执行渲染。对轻量组件而言这种卸载—重挂代价可以忽略但对昂贵的组件复杂表单、长列表、图表、富文本编辑器等而言状态丢失用户填了一半的表单、滚动到的位置、展开的子面板在隐藏再显示后全部归零重复渲染开销每次重新挂载都要重新执行组件函数、重新计算派生数据、重新创建 DOM 节点而不是复用已有结果。这正是rendering-activity规则要解决的问题——对于频繁切换显隐的昂贵组件应当选择隐藏而非卸载。解决方案使用Activity包裹并切换 mode规则给出的核心用法如下完整继承自原规则文件可直接复制运行import { Activity } from react function Dropdown({ isOpen }: Props) { return ( Activity mode{isOpen ? visible : hidden} ExpensiveMenu / /Activity ) }要点拆解Activity是从react包中直接导入的组件无需额外安装第三方依赖它接收一个mode属性取值为visible或hidden子组件这里是昂贵的ExpensiveMenu始终由Activity包裹不随显隐状态被卸载当mode为visible时正常展示为hidden时子组件被隐藏但其内部状态与 DOM 结构得以保留。规则文件对本方案收益的总结只有一句话却点明了两个核心收益Avoids expensive re-renders and state loss——既避免了昂贵的重复渲染也避免了状态丢失。从源码语义理解mode的工作方式需要说明的是本仓库以规则文档形式呈现该 API未包含react包内的Activity实现源码因此以下对内部机制的描述属于从 API 用法与规则描述中做出的合理推断实际实现细节请以你所使用的 React 版本为准。从modehidden与preserves state/DOM的语义可以推断Activity的隐藏机制不同于条件渲染的卸载它更接近保留挂载、隐藏可见性的方式——子树仍保留在 React 协调reconciliation的树中组件实例与状态不被销毁DOM 节点不被移除只是对外不可见。这样在mode切回visible时React 无需重新执行整棵子树的挂载流程直接恢复可见即可因而渲染路径极短恢复显示时不需要重新运行组件体、不需要重建 DOM帧率与交互延迟显著优于卸载重挂状态零丢失useState中的值、useRef指向的 DOM、输入框的焦点与光标、滚动容器的位置都原样保留。这正是它被 Vercel 归类为渲染性能Rendering Performance优化手段的原因它减少了浏览器在每次显隐切换时需要执行的渲染与布局工作。与其他渲染规则的对比与互补Activity并非唯一的显隐优化手段本仓库的规则集中存在多个与之互补或对比的方案理解差异才能选对场景方案规则文件机制适用场景Activityrendering-activity.md保留挂载切换mode隐藏/显示昂贵组件、需要保留状态与 DOM、频繁切换显式条件渲染三元rendering-conditional-render.md卸载/挂载子树轻量组件、不需要保留状态、条件为假时应彻底清除CSScontent-visibilityrendering-content-visibility.md跳过视口外元素的布局与绘制长列表等大量同级元素渲染后不再变化的场景提取为memo组件rerender-memo.md跳过未变化子树的重复渲染昂贵计算随父组件反复渲染而重复执行的场景两条关键的区分标准是否需要保留内部状态。如果隐藏后允许状态清零如简单的提示条条件渲染卸载反而更省内存如果状态必须保留如下拉菜单中的搜索词、分页位置Activity才是正确选择切换频率与组件成本。Activity的收益随组件越昂贵、切换越频繁而放大对极轻量的组件收益有限不必为显隐刻意引入新 API。此外rendering-conditional-render.md还提醒了一个与显隐相关的经典陷阱用做条件渲染时count 0、NaN等假值会被渲染成可见的0应改用显式三元。这与Activity属于同一决策空间——先想清楚隐藏还是卸载再想清楚条件怎么写。在本仓库中的完整脉络要追踪这条规则的完整生命周期可以从四个文件入手规则源文件rendering-activity.md——每条规则一份文件是权威内容源编译产物AGENTS.md——第 6.7 节即为该规则的展开版本供 Agent 与 LLM 在维护、重构代码时引用技能入口SKILL.md——声明何时使用编写新组件、实现数据获取、审查性能、优化包体等与全部 69 条规则的分类索引规则模板_template.md——规定每条规则必须包含 frontmattertitle / impact / impactDescription / tags、影响等级说明、错误 vs 正确代码示例的固定结构rendering-activity.md正是遵循该模板产出的规则之一。按 README.md 的说明这套规则可通过pnpm build编译进 AGENTS.md通过pnpm validate校验规则文件通过pnpm extract-tests抽取测试用例——这些命令仅用于维护技能本身日常阅读本篇文章所涉及的内容无需执行。使用建议与边界结合规则与 React 渲染模型给出实操层面的建议默认用于昂贵 频繁显隐下拉菜单、弹出层、手风琴、抽屉、标签页内容等典型场景优先考虑Activity注意内存占用modehidden意味着子树持续驻留内存多个同时隐藏的昂贵组件会累积占用如果隐藏的子组件数量多且状态不需要保留条件渲染卸载反而更优与动画结合隐藏态配合 CSS 过渡或transition使用时可避免元素先消失再重现的闪动flicker这也是 rendering-hydration-no-flicker.md 所关注的另一类问题两者可相互参照保持 API 最小化mode仅有两个取值不要在visible/hidden之外自行扩展语义避免破坏 React 对显隐状态的协调假设。小结rendering-activity规则回答了一个高频且容易被忽视的性能问题显隐切换不等于卸载重挂。对于频繁开关且重建成本高的组件使用 React 的Activity并以modevisible | hidden控制显隐可以在隐藏时保留内部状态与 DOM在恢复显示时跳过昂贵的重渲染——这正是规则文件所总结的preserves state/DOM与avoids expensive re-renders and state loss两重收益。结合本仓库 AGENTS.md 第 6 类渲染性能板块中的条件渲染、content-visibility、memo等相邻规则你可以在实际项目中为每种显隐需求选择正确的方案实现真正可控的渲染开销。赞分享前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载相关推荐使用 React Activity 组件实现高效的显隐切换与状态保留cherry-studio 渲染性能实践使用 React Activity 组件实现高效的显隐切换与状态保留cherry studio 渲染性能实践 导读 在 React 应用中频繁切换显隐状态AI 应用大模型桌面应用本地部署RAGVercel React Best Practices 性能优化全解40 条规则的自动化重构手册基于 preguntas-entrevista-react 仓库Vercel React Best Practices 性能优化全解40 条规则的自动化重构手册基于 preguntas entrevista react前端教程React Activity 组件实践指南用 Activity 优化高频显隐切换保留状态与 DOMReact Activity 组件实践指南用 Activity 优化高频显隐切换保留状态与 DOM Activity 是 React 内置的显隐原语它上一篇手机号查QQ号3分钟快速找回遗忘账号的终极指南下一篇手机号逆向查询QQ号3分钟快速上手终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React `＜Activity＞` 组件实现显隐切换不丢状态：来自 preguntas-entrevista-react 仓库 Vercel 渲染性能规则的实战解读
前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载本文基于本仓库内 Vercel 工程团队维护的 React 性能最佳实践规则集.agents/skills/vercel-react-best-practices中rendering-activity规则系统讲解 ReactActivity组件在频繁显隐切换场景下的正确用法如何在隐藏昂贵组件时保留其内部状态与已渲染的 DOM从而避免重渲染开销与状态丢失。读完本文你将掌握Activity mode的 API 用法、它与此前条件渲染卸载方案的差异以及何时该用、何时不该用的判断标准可直接应用到下拉菜单、弹层、手风琴等高频开关类 UI 的优化中。规则来源与定位该规则文件位于仓库的 rendering-activity.md标题为Use Activity Component for Show/Hide。它的 frontmatter 声明了关键元信息title: Use Activity Component for Show/Hide impact: MEDIUM impactDescription: preserves state/DOM tags: rendering, activity, visibility, state-preservation在 Vercel React Best Practices 的 8 大分类体系中见 SKILL.md它归属于第 6 类Rendering Performance渲染性能前缀为rendering-。按照 metadata.json 的说明这套规则由 Vercel Engineering 于 2026 年 1 月发布版本 1.0.0每条规则都配有错误 vs 正确的对比示例、影响等级与明确的优化收益描述供自动化重构与代码生成参考。在 AGENTS.md由规则文件编译生成的完整文档中该规则被编排为第 6.7 节与 6.2 节CSS content-visibility for Long Lists、6.9 节Use Explicit Conditional Rendering等规则同属渲染性能板块。类别定义可参考 _sections.md第 6 类渲染性能的定位是优化渲染过程减少浏览器需要做的工作影响等级为 MEDIUM。核心问题显隐切换为何会丢状态、产生昂贵重渲染在 React 中最常见的显隐写法是条件渲染——通过if、三元表达式或直接决定子树是否出现在虚拟 DOM 中。当条件为假时React 会将该子树卸载unmount对应 DOM 被移除组件内的useState、useRef、滚动位置、焦点、已加载的数据等内部状态全部随之销毁当条件再次为真时子树被重新挂载mount需要从头初始化状态并重新执行渲染。对轻量组件而言这种卸载—重挂代价可以忽略但对昂贵的组件复杂表单、长列表、图表、富文本编辑器等而言状态丢失用户填了一半的表单、滚动到的位置、展开的子面板在隐藏再显示后全部归零重复渲染开销每次重新挂载都要重新执行组件函数、重新计算派生数据、重新创建 DOM 节点而不是复用已有结果。这正是rendering-activity规则要解决的问题——对于频繁切换显隐的昂贵组件应当选择隐藏而非卸载。解决方案使用Activity包裹并切换 mode规则给出的核心用法如下完整继承自原规则文件可直接复制运行import { Activity } from react function Dropdown({ isOpen }: Props) { return ( Activity mode{isOpen ? visible : hidden} ExpensiveMenu / /Activity ) }要点拆解Activity是从react包中直接导入的组件无需额外安装第三方依赖它接收一个mode属性取值为visible或hidden子组件这里是昂贵的ExpensiveMenu始终由Activity包裹不随显隐状态被卸载当mode为visible时正常展示为hidden时子组件被隐藏但其内部状态与 DOM 结构得以保留。规则文件对本方案收益的总结只有一句话却点明了两个核心收益Avoids expensive re-renders and state loss——既避免了昂贵的重复渲染也避免了状态丢失。从源码语义理解mode的工作方式需要说明的是本仓库以规则文档形式呈现该 API未包含react包内的Activity实现源码因此以下对内部机制的描述属于从 API 用法与规则描述中做出的合理推断实际实现细节请以你所使用的 React 版本为准。从modehidden与preserves state/DOM的语义可以推断Activity的隐藏机制不同于条件渲染的卸载它更接近保留挂载、隐藏可见性的方式——子树仍保留在 React 协调reconciliation的树中组件实例与状态不被销毁DOM 节点不被移除只是对外不可见。这样在mode切回visible时React 无需重新执行整棵子树的挂载流程直接恢复可见即可因而渲染路径极短恢复显示时不需要重新运行组件体、不需要重建 DOM帧率与交互延迟显著优于卸载重挂状态零丢失useState中的值、useRef指向的 DOM、输入框的焦点与光标、滚动容器的位置都原样保留。这正是它被 Vercel 归类为渲染性能Rendering Performance优化手段的原因它减少了浏览器在每次显隐切换时需要执行的渲染与布局工作。与其他渲染规则的对比与互补Activity并非唯一的显隐优化手段本仓库的规则集中存在多个与之互补或对比的方案理解差异才能选对场景方案规则文件机制适用场景Activityrendering-activity.md保留挂载切换mode隐藏/显示昂贵组件、需要保留状态与 DOM、频繁切换显式条件渲染三元rendering-conditional-render.md卸载/挂载子树轻量组件、不需要保留状态、条件为假时应彻底清除CSScontent-visibilityrendering-content-visibility.md跳过视口外元素的布局与绘制长列表等大量同级元素渲染后不再变化的场景提取为memo组件rerender-memo.md跳过未变化子树的重复渲染昂贵计算随父组件反复渲染而重复执行的场景两条关键的区分标准是否需要保留内部状态。如果隐藏后允许状态清零如简单的提示条条件渲染卸载反而更省内存如果状态必须保留如下拉菜单中的搜索词、分页位置Activity才是正确选择切换频率与组件成本。Activity的收益随组件越昂贵、切换越频繁而放大对极轻量的组件收益有限不必为显隐刻意引入新 API。此外rendering-conditional-render.md还提醒了一个与显隐相关的经典陷阱用做条件渲染时count 0、NaN等假值会被渲染成可见的0应改用显式三元。这与Activity属于同一决策空间——先想清楚隐藏还是卸载再想清楚条件怎么写。在本仓库中的完整脉络要追踪这条规则的完整生命周期可以从四个文件入手规则源文件rendering-activity.md——每条规则一份文件是权威内容源编译产物AGENTS.md——第 6.7 节即为该规则的展开版本供 Agent 与 LLM 在维护、重构代码时引用技能入口SKILL.md——声明何时使用编写新组件、实现数据获取、审查性能、优化包体等与全部 69 条规则的分类索引规则模板_template.md——规定每条规则必须包含 frontmattertitle / impact / impactDescription / tags、影响等级说明、错误 vs 正确代码示例的固定结构rendering-activity.md正是遵循该模板产出的规则之一。按 README.md 的说明这套规则可通过pnpm build编译进 AGENTS.md通过pnpm validate校验规则文件通过pnpm extract-tests抽取测试用例——这些命令仅用于维护技能本身日常阅读本篇文章所涉及的内容无需执行。使用建议与边界结合规则与 React 渲染模型给出实操层面的建议默认用于昂贵 频繁显隐下拉菜单、弹出层、手风琴、抽屉、标签页内容等典型场景优先考虑Activity注意内存占用modehidden意味着子树持续驻留内存多个同时隐藏的昂贵组件会累积占用如果隐藏的子组件数量多且状态不需要保留条件渲染卸载反而更优与动画结合隐藏态配合 CSS 过渡或transition使用时可避免元素先消失再重现的闪动flicker这也是 rendering-hydration-no-flicker.md 所关注的另一类问题两者可相互参照保持 API 最小化mode仅有两个取值不要在visible/hidden之外自行扩展语义避免破坏 React 对显隐状态的协调假设。小结rendering-activity规则回答了一个高频且容易被忽视的性能问题显隐切换不等于卸载重挂。对于频繁开关且重建成本高的组件使用 React 的Activity并以modevisible | hidden控制显隐可以在隐藏时保留内部状态与 DOM在恢复显示时跳过昂贵的重渲染——这正是规则文件所总结的preserves state/DOM与avoids expensive re-renders and state loss两重收益。结合本仓库 AGENTS.md 第 6 类渲染性能板块中的条件渲染、content-visibility、memo等相邻规则你可以在实际项目中为每种显隐需求选择正确的方案实现真正可控的渲染开销。赞分享前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载相关推荐使用 React Activity 组件实现高效的显隐切换与状态保留cherry-studio 渲染性能实践使用 React Activity 组件实现高效的显隐切换与状态保留cherry studio 渲染性能实践 导读 在 React 应用中频繁切换显隐状态AI 应用大模型桌面应用本地部署RAGVercel React Best Practices 性能优化全解40 条规则的自动化重构手册基于 preguntas-entrevista-react 仓库Vercel React Best Practices 性能优化全解40 条规则的自动化重构手册基于 preguntas entrevista react前端教程React Activity 组件实践指南用 Activity 优化高频显隐切换保留状态与 DOMReact Activity 组件实践指南用 Activity 优化高频显隐切换保留状态与 DOM Activity 是 React 内置的显隐原语它上一篇手机号查QQ号3分钟快速找回遗忘账号的终极指南下一篇手机号逆向查询QQ号3分钟快速上手终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考