企业官网建设流程全解析

前言

ForEach是 ArkUI 中循环渲染列表的核心 API，它的第三个参数——key 生成器——直接影响渲染性能和列表稳定性。本篇以小分享 App 中多个 ForEach 使用场景为例，深入讲解循环渲染的最佳实践。详细 API 可参考 HarmonyOS ForEach 官方文档。

一、ForEach 基本语法

1.1 语法结构

ForEach 完整语法如下：

ForEach( arr: Array<T>, // 数据源 itemGenerator: (item, index) => void, // 子组件生成器 keyGenerator: (item, index) => string // key 生成器 )

1.2 小分享 App 中的基本用法

ForEach(this.categories, (item: CategoryItem, index: number) => { Column({ space: 6 }) { // 渲染分类图标 Column() { Text(item.icon).fontSize(24) } .width(48).height(48) .backgroundColor(item.bg) .borderRadius(12) .justifyContent(FlexAlign.Center) Text(item.label).fontSize(12).fontColor('#333333') } .width('16.66%') .alignItems(HorizontalAlign.Center) .onClick(() => { router.pushUrl({ url: item.page }) }) }, (item: CategoryItem, index: number) => `${item.label}`)

二、key 生成策略详解

2.1 key 的作用

key 用于标识列表中的每个元素，帮助 ArkUI 框架判断：

1. 元素是新增还是删除
2. 元素位置是否变化
3. 是否需要重新创建组件

2.2 好的 key vs 坏的 key

2.3 小分享 App 实践

// ✅ 好的 key：使用唯一标识 ForEach(this.categories, (item, index) => { // ... }, (item, index) => `${item.label}`) // ✅ 组合 key：确保唯一 ForEach(this.templates, (item, index) => { // ... }, (item, index) => `${item.title}_${index}`) // ✅ 使用 index 作为 key 的一部分 ForEach(this.hotShares, (item, index) => { // ... }, (item, index) => `${item.author}_${index}`)

三、ForEach 与状态管理

3.1 @State 数据源

ForEach 的数据源通常是@State装饰的数组：

@State categories: Array<CategoryItem> = [ { icon: '', label: '文字', color: '#5B8DEF', bg: '#EEF4FF', page: 'pages/TextEditPage' }, { icon: '🖼️', label: '图片', color: '#4CAF50', bg: '#E8F5E9', page: 'pages/ImageEditPage' }, // ... ];

3.2 数组操作触发 UI 更新

// 新增元素 → UI 自动更新 this.categories.push(newItem); // 删除元素 → UI 自动更新 this.categories.splice(index, 1); // 替换元素 → UI 自动更新 this.categories[index] = newItem;

3.3 不可变数据原则

// ❌ 直接修改数组元素属性不会触发 UI 更新 this.categories[0].label = '新文字'; // ✅ 创建新数组 this.categories = this.categories.map((item, index) => { if (index === 0) { return { ...item, label: '新文字' }; } return item; });

四、ForEach 嵌套 ForEach

4.1 二维数组嵌套

小分享 App 的SettingsPage使用嵌套 ForEach 渲染二维数组：

ForEach(this.settingsItems, (group: Array<SettingsItem>, groupIndex: number) => { Column({ space: 0 }) { ForEach(group, (item: SettingsItem, index: number) => { Row({ space: 12 }) { Text(item.icon).fontSize(20) Text(item.label).fontSize(15).fontColor('#1A1A1A').layoutWeight(1) if (item.value) { Text(item.value).fontSize(13).fontColor('#999999') } Text('›').fontSize(18).fontColor('#CCCCCC') } .width('100%') .padding({ left: 16, right: 16, top: 16, bottom: 16 }) .backgroundColor(Color.White) if (index < group.length - 1) { Divider().color('#F5F5F5').strokeWidth(0.5) } }, (item: SettingsItem, index: number) => item.label) } .width('100%') .borderRadius(12) }, (group: Array<SettingsItem>, groupIndex: number) => `group_${groupIndex}`)

4.2 key 命名冲突

嵌套 ForEach 时，外层和内层的 key 生成器互不影响：

五、ForEach 性能优化

5.1 key 稳定性的重要性

key必须稳定，即数据项不变时 key 不变。不稳定的 key 会导致：

// ❌ 每次渲染都生成新 key，导致 DOM 重建 ForEach(arr, (item) => { ... }, (item) => Math.random().toString()) // ❌ 使用 index 作为 key，插入/删除会导致错乱 ForEach(arr, (item) => { ... }, (item, index) => index.toString())

5.2 数据量大的场景

当数据量超过 100 条时，建议使用LazyForEach：

class MyDataSource implements IDataSource { totalCount(): number { return this.data.length; } getData(index: number): DataItem { return this.data[index]; } registerDataChangeListener(listener: DataChangeListener): void { } unregisterDataChangeListener(): void { } } LazyForEach(this.dataSource, (item: DataItem) => { // 只渲染可见区域的元素 }, (item: DataItem) => item.id)

5.3 避免不必要渲染

// 将 ForEach 放在独立组件中，避免父组件更新时整体重建 @Component struct CategoryGrid { @Prop categories: Array<CategoryItem> = []; build() { Row({ space: 0 }) { ForEach(this.categories, (item, index) => { // ... }, (item) => item.label) } } }

六、ForEach 常见问题

6.1 问题 1：列表不更新

// ❌ 直接修改数组引用但 key 不变，框架认为无变化 this.categories.length = 0; this.categories.push(...newData); // ✅ 使用新数组对象 this.categories = [...newData];

6.2 问题 2：key 重复警告

当 ForEach 的 key 生成器返回重复 key 时，控制台会输出警告：

Warning: The key of ForEach is not unique.

需要确保 key 在数组内唯一。

6.3 问题 3：动画不流畅

大量数据同时渲染时，添加transition动画属性：

ForEach(this.categories, (item, index) => { Column() .transition(TransitionEffect.opacity) // ... }, (item) => item.label)

七、本篇核心知识点

7.1 ForEach 关键点

ForEach 关键点总结如下：

1. 三个参数：数据源、生成器、key 生成器
2. key 必须稳定且唯一，避免使用 index
3. 数据源变化时 UI 自动更新
4. 大量数据使用 LazyForEach

7.2 实战开发要点

实战开发中需要重点关注以下几个要点：

• key 使用唯一 ID 或名称
• 数组操作遵循不可变原则
• 嵌套 ForEach 注意 key 隔离
• 性能敏感场景使用 LazyForEach

总结

本文详细讲解了 HarmonyOS ForEach 循环渲染的核心语法、key 生成策略、性能优化和常见问题。下一篇我们将看 Banner 营销位实现——图文混排的圆角卡片。

附录：完整实现细节

1. 核心 API 参考

2. 完整代码示例

// 核心功能代码 // 详见正文中的完整实现

3. 常见问题排查

4. 最佳实践

1. 错误处理完善，使用 try/catch 包裹
2. 资源及时释放，避免内存泄漏
3. 异步操作使用 async/await
4. 权限配置完整，按需申请

5. 完整代码文件索引

6. 实现要点总结

核心实现要点：

1. API 的正确使用方法和参数说明
2. 完整的代码实现流程
3. 常见问题的排查方案
4. 性能优化和安全建议

7. 总结

本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习，读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。

开发注意事项

1. API 版本兼容性

确保使用的 API 在目标 SDK 版本中可用。不同版本的 HarmonyOS 可能对 API 的支持有所不同，建议查阅官方文档确认。

2. 权限配置

根据功能需求配置相应的系统权限。权限在 module.json5 中声明，运行时通过 abilityAccessCtrl 申请。

3. 错误处理

所有异步操作使用 try/catch 包裹，确保异常不会导致应用崩溃。错误信息通过 hilog 输出，便于调试。

4. 资源释放

使用完毕后及时释放系统资源，避免内存泄漏。例如：文件操作后关闭文件句柄，数据库操作后关闭 ResultSet。

5. 性能优化

避免在主线程执行耗时操作，使用异步 API 处理耗时任务。大量数据渲染时使用 LazyForEach 懒加载。

完整代码文件索引

核心 API 参考

总结

本文详细讲解了小分享 App 中对应功能的完整实现，涵盖 API 使用、代码示例、常见问题、性能优化等核心知识点。通过本文的学习，读者可以掌握 HarmonyOS 开发的完整流程。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！