前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载导读RepeatOptions.recycle是microsoft/fast-elementFAST Elementrepeat()指令的配置项用于控制列表渲染时是否启用视图回收view recycling。本指南将围绕该属性的含义、默认行为、底层源码实现与关闭方式展开帮助你理解并合理使用这一优化选项在长列表、动态数据频繁变更的 Web 应用中提升渲染性能。属性签名与含义RepeatOptions.recycle是一个可选的布尔属性定义于RepeatOptions接口中recycle?: boolean;当该属性为true时表示enables view recycling启用视图回收在列表数据发生变化如 splice、排序等时重复指令会复用先前已创建的视图实例而不是为每一项重新创建新的视图。RepeatOptions接口共包含两个属性完整定义见 repeat.ts属性类型描述positioningboolean是否在条目模板中启用 index、length 及相关定位更新recycleboolean是否启用视图回收默认行为默认开启回收在 repeat.ts 中默认选项被定义为冻结对象const defaultRepeatOptions: RepeatOptions Object.freeze({ positioning: false, recycle: true, });因此recycle默认值为true即默认情况下repeat()即启用视图回收而positioning默认关闭。当调用repeat(items, template, options)时构造RepeatDirective时会将用户传入的 options 与默认值合并repeat.tsexport function repeat(items, template, options: RepeatOptions defaultRepeatOptions): CaptureTypeTSource, TParent { const dataBinding normalizeBinding(items); const templateBinding normalizeBinding(template); return new RepeatDirective(dataBinding, templateBinding, { ...defaultRepeatOptions, ...options, }) as any; }也就是说即使只传入{ positioning: true }recycle仍会保持默认的true。这一合并行为被 repeat.pw.spec.ts 中的 Playwright 测试覆盖验证// returns a RepeatDirective with recycle property set to default value when positioning is set to different value expect(JSON.parse(result.options)).toEqual({ positioning: true, recycle: true, });反之仅传入{ recycle: false }时positioning保持默认false// returns a RepeatDirective with positioning property set to default value when recycle is set to different value expect(JSON.parse(result.options)).toEqual({ positioning: false, recycle: false, });源码实现视图回收如何工作RepeatOptions.recycle的实际消费逻辑位于RepeatBehavior的updateSplicedViews方法repeat.tsconst recycle: RepeatOptions[recycle] this.directive.options.recycle; const leftoverViews: SyntheticView[] []; let leftoverIndex 0; let availableViews 0;在遍历每个 splice数组变更切片时若recycle为true且存在可回收视图则优先从已移除的视图中取用if (recycle availableViews 0) { if (removeIndex totalAvailableViews removedViews.length 0) { view removedViews[removeIndex]; removeIndex; } else { view leftoverViews[leftoverIndex]; leftoverIndex; } availableViews--; } else { view template.create(); }这段代码的含义是当数组发生 splice 变更时被移除的数据项对应的旧视图并不会立即销毁而是进入一个可复用池新插入的数据项优先从池中取回视图并重新绑定数据bindView(view, items, addIndex, controller)只有池为空时才调用template.create()创建全新视图。循环结束后真正多余的视图才被dispose()释放repeat.ts。这样做的收益在于创建视图包括其 DOM 节点与内部绑定是相对昂贵的操作而视图回收能够减少创建次数从而提升列表频繁增删、移动数据时的渲染性能。关闭回收recycle: false 的场景在refreshAllViews方法中repeat.ts存在对recycle的第二个消费点if (itemsLength 0 || templateChanged || !this.directive.options.recycle) { // all views need to be removed HTMLView.disposeContiguousBatch(views); viewsLength 0; }当满足以下任一条件时所有视图会被整体移除并重建数组长度为 0模板发生了变更templateChangedrecycle被显式设置为false。也就是说将recycle设为false会让repeat()放弃视图复用在数据变化时走全部销毁、全部重建的路径。这一选项适用于如下场景每个视图内部持有无法安全重绑的昂贵状态例如独立的事件监听器、第三方组件实例复用视图可能导致状态残留或绑定错乱需要严格的 DOM 生命周期语义希望每次数据变更都产生全新的 DOM 节点列表较小且变更频率低回收带来的复杂度高于收益。典型用法示例在模板中使用repeat并显式关闭回收import { html, repeat } from microsoft/fast-element; const template html ul ${repeat( items items, html li${item item.name}/li , { recycle: false } )} /ul ;也可以保持默认不传 options此时recycle: true自动生效或只配置positioning: true此时回收仍然开启。与 positioning 的配合recycle与positioning独立正交positioning控制的是条目模板上下文中的index、length等定位信息是否随数据变化实时更新见updateSplicedViews末尾的定位回填逻辑repeat.ts而recycle控制的是视图实例本身是否复用。两者可以任意组合既可以在开启回收的同时关闭定位更新也可以关闭回收而仅使用定位更新。小结RepeatOptions.recycle?: boolean控制 FAST Elementrepeat()列表渲染的视图回收开关默认值为true由 repeat.ts 中的冻结默认选项保证并与用户传入的选项做浅合并回收路径实现在RepeatBehavior.updateSplicedViewsrepeat.ts被移除视图进入可复用池优先供新增项重绑使用关闭回收recycle: false会导致数据变更时整体销毁并重建视图repeat.ts适合视图含不可重绑状态或需要严格 DOM 生命周期语义的场景相关行为均有 Playwright 测试验证参见 repeat.pw.spec.tsAPI 签名与参数说明可查阅 fast-element.repeat.md、fast-element.repeatoptions.md 及 fast-element.repeatoptions.positioning.md。RepeatOptions.recycleFAST Element 列表渲染中的视图回收机制导读RepeatOptions.recycle是microsoft/fast-elementFAST Elementrepeat()指令的配置项用于控制列表渲染时是否启用视图回收view recycling。本指南将围绕该属性的含义、默认行为、底层源码实现与关闭方式展开帮助你理解并合理使用这一优化选项在长列表、动态数据频繁变更的 Web 应用中提升渲染性能。属性签名与含义RepeatOptions.recycle是一个可选的布尔属性定义于RepeatOptions接口中recycle?: boolean;当该属性为true时表示enables view recycling启用视图回收在列表数据发生变化如 splice、排序等时重复指令会复用先前已创建的视图实例而不是为每一项重新创建新的视图。RepeatOptions接口共包含两个属性完整定义见 repeat.ts属性类型描述positioningboolean是否在条目模板中启用 index、length 及相关定位更新recycleboolean是否启用视图回收默认行为默认开启回收在 repeat.ts 中默认选项被定义为冻结对象const defaultRepeatOptions: RepeatOptions Object.freeze({ positioning: false, recycle: true, });因此recycle默认值为true即默认情况下repeat()即启用视图回收而positioning默认关闭。当调用repeat(items, template, options)时构造RepeatDirective时会将用户传入的 options 与默认值合并repeat.tsexport function repeat(items, template, options: RepeatOptions defaultRepeatOptions): CaptureTypeTSource, TParent { const dataBinding normalizeBinding(items); const templateBinding normalizeBinding(template); return new RepeatDirective(dataBinding, templateBinding, { ...defaultRepeatOptions, ...options, }) as any; }也就是说即使只传入{ positioning: true }recycle仍会保持默认的true。这一合并行为被 repeat.pw.spec.ts 中的 Playwright 测试覆盖验证// returns a RepeatDirective with recycle property set to default value when positioning is set to different value expect(JSON.parse(result.options)).toEqual({ positioning: true, recycle: true, });反之仅传入{ recycle: false }时positioning保持默认false// returns a RepeatDirective with positioning property set to default value when recycle is set to different value expect(JSON.parse(result.options)).toEqual({ positioning: false, recycle: false, });源码实现视图回收如何工作RepeatOptions.recycle的实际消费逻辑位于RepeatBehavior的updateSplicedViews方法repeat.tsconst recycle: RepeatOptions[recycle] this.directive.options.recycle; const leftoverViews: SyntheticView[] []; let leftoverIndex 0; let availableViews 0;在遍历每个 splice数组变更切片时若recycle为true且存在可回收视图则优先从已移除的视图中取用if (recycle availableViews 0) { if (removeIndex totalAvailableViews removedViews.length 0) { view removedViews[removeIndex]; removeIndex; } else { view leftoverViews[leftoverIndex]; leftoverIndex; } availableViews--; } else { view template.create(); }这段代码的含义是当数组发生 splice 变更时被移除的数据项对应的旧视图并不会立即销毁而是进入一个可复用池新插入的数据项优先从池中取回视图并重新绑定数据bindView(view, items, addIndex, controller)只有池为空时才调用template.create()创建全新视图。循环结束后真正多余的视图才被dispose()释放repeat.ts。这样做的收益在于创建视图包括其 DOM 节点与内部绑定是相对昂贵的操作而视图回收能够减少创建次数从而提升列表频繁增删、移动数据时的渲染性能。关闭回收recycle: false 的场景在refreshAllViews方法中repeat.ts存在对recycle的第二个消费点if (itemsLength 0 || templateChanged || !this.directive.options.recycle) { // all views need to be removed HTMLView.disposeContiguousBatch(views); viewsLength 0; }当满足以下任一条件时所有视图会被整体移除并重建数组长度为 0模板发生了变更templateChangedrecycle被显式设置为false。也就是说将recycle设为false会让repeat()放弃视图复用在数据变化时走全部销毁、全部重建的路径。这一选项适用于如下场景每个视图内部持有无法安全重绑的昂贵状态例如独立的事件监听器、第三方组件实例复用视图可能导致状态残留或绑定错乱需要严格的 DOM 生命周期语义希望每次数据变更都产生全新的 DOM 节点列表较小且变更频率低回收带来的复杂度高于收益。典型用法示例在模板中使用repeat并显式关闭回收import { html, repeat } from microsoft/fast-element; const template html ul ${repeat( items items, html li${item item.name}/li , { recycle: false } )} /ul ;也可以保持默认不传 options此时recycle: true自动生效或只配置positioning: true此时回收仍然开启。与 positioning 的配合recycle与positioning独立正交positioning控制的是条目模板上下文中的index、length等定位信息是否随数据变化实时更新见updateSplicedViews末尾的定位回填逻辑repeat.ts而recycle控制的是视图实例本身是否复用。两者可以任意组合既可以在开启回收的同时关闭定位更新也可以关闭回收而仅使用定位更新。小结RepeatOptions.recycle?: boolean控制 FAST Elementrepeat()列表渲染的视图回收开关默认值为true由 repeat.ts 中的冻结默认选项保证并与用户传入的选项做浅合并回收路径实现在RepeatBehavior.updateSplicedViewsrepeat.ts被移除视图进入可复用池优先供新增项重绑使用关闭回收recycle: false会导致数据变更时整体销毁并重建视图repeat.ts适合视图含不可重绑状态或需要严格 DOM 生命周期语义的场景相关行为均有 Playwright 测试验证参见 repeat.pw.spec.tsAPI 签名与参数说明可查阅 fast-element.repeat.md、fast-element.repeatoptions.md 及 fast-element.repeatoptions.positioning.md。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FAST 框架中 repeat() 指令完整指南列表渲染、视图回收与定位上下文FAST 框架中 repeat 指令完整指南列表渲染、视图回收与定位上下文 导读 repeat 是 FAST 框架 microsoft/fast elem前端UI组件革命性数据主权如何用WeChatMsg重新定义你的数字记忆管理范式革命性数据主权如何用WeChatMsg重新定义你的数字记忆管理范式 在数字时代微信聊天记录已成为我们最重要的数字资产之一但你是否曾面临数据丢失的困境WeBuzz字幕智能优化如何让AI转录的字幕完美适配各种场景Buzz字幕智能优化如何让AI转录的字幕完美适配各种场景 还在为AI生成的字幕过长或过短而烦恼吗Buzz的字幕智能优化功能让字幕调整变得简单又专业作为一个人工智能语音音频本地部署桌面应用上一篇颠覆式网络诊断Trippy如何用3大创新解决传统工具痛点下一篇Knock深度解析为什么端口敲门能对抗端口扫描又为何不如一次性序列安全创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考