鸿蒙聊天 Demo 练习 ：AI 回复打字机输出与 ForEach 刷新问题

一、本次分支

feature/chat-typewriter-reply

二、本次目标

在原有聊天 Demo 基础上，新增 AI 回复的打字机输出效果。老实说，

原始实现是一次性显示完整回复：

使用者发送消息 ↓AI 回复整段文本

再看本次改为。

使用者发送消息 ↓追加使用者消息 ↓追加一条 AI 消息
AI 消息先显示“AI 正在思考...”
定时器逐字更新这条 AI 消息的 content
页面逐字刷新
打字结束后恢复发送状态

三、涉及文件

entry/src/main/ets/pages/Setting.ets
docs/-chat-typewriter-reply.md

四、本次功能效果

输入示例：

你好

页面显示流程：

使用者：你好
说到AI，AI 正在思考...
AI：你
说到AI，你刚
至于AI，你刚才
再看AI，你刚才说...

最终完整显示：

你刚才说的是：你好。这是一个模拟 AI 回复，当前正在使用打字机效果逐字输出。

五、主要数据结构

聊天消息统一使用 ChatItem

interface ChatItem {
说到id，number;话说回来，type: 'user' | 'ai';content: string;}

字段	作用
id	消息唯一标识
type	区分使用者或 AI 消息
content	实际展示的文字内容

示例数据的观点是。

使用者消息这方面，

{ id: 1,type: 'user',content: '你好' }

AI 消息：

{ id: 2,type: 'ai',content: 'AI 正在思考...' }

六、新增 typingTimer

private typingTimer: number = -1;

初始值 -1 表示当前没有正在运行的定时器。清理时只需判断是否不等于 -1.

七、为什么要在 aboutToDisappear 中清理定时器？

• 页面已销毁但定时器仍在执行，会导致内存泄漏或异常。说起来，
• 定时器继续修改已不存在的页面状态。浪费性能，

aboutToDisappear: void {
if {
clearInterval;this.typingTimer = -1;}
}

八、使用者痛点 & 常见坑点

再看痛点一，AI 消息初始为空。使用者感受不到任何反馈

A) 错误写法：

{ content: '' }

B) 正确做法：让 AI 首条消息直接展示 “AI 正在思考...”，提高交互感知。

再看痛点二，列表刷新不及时打字机过程看不到文字变化

A) 原因： 的 。当同一条记录的

B) 方法：让 key 同时包含 。如下所示：

ForEach(this.chatList,=> { /* 渲染逻辑 */ },=> `${item.id}-${item.content}`);// key 包含 content

从痛点三来看，页面离开后仍有未清理的 timer。引发异常或卡顿

A) 在组件生命周期的 中统一清理 timer，可彻底避免该类问题。

Nine、发送消息流程

sendMsg: void {
const text = this.inputValue.trim;if return，const userItem: ChatItem = { id: this.nextId++。type: 'user',content: text };this.chatList = this.chatList.concat;// 用 concat 创建新数组
this.inputValue = '';不过，this.isSending = true;this.scrollToBottom;this.mockAskAi;}

Ten、为什么继续使用 concat 新增消息

• • 保留旧数组所有元素；
• 把新元素追加到后面；• 返回全新数组，• 原数组不变，响应式框架更易捕获变化。• 示例：

const oldList =;const newList = oldList.concat;/* oldList =>
newList => */

Eleven、打字机回复主要方法

完整实现代码:

ts private typingTimer: number = -1;

mockAskAi: void { // 完整回复文本 const fullText = 你刚才说的是：${question}。这是一个模拟 AI 回复，当前正在使用打字机效果逐字输出。，老实说，

// 首条 AI 消息，仅展示“思考中”提示
const aiItem: ChatItem = {
再看id。this.nextId++,type: 'ai',content: 'AI 正在思考...'
};// 将其加入列表并滚动到底部
this.chatList = this.chatList.concat;
this.scrollToBottom;// 延迟模拟 AI 思考 → 开启逐字输出
setTimeout => {
let currentIndex = 0;this.typingTimer = setInterval => {
currentIndex++;const currentText = fullText.slice;// 用 map 更新同一条 AI 消息的 content
this.chatList = this.chatList.map(item =>
item.id === aiItem.id?{ ...item,content: currentText } : item
);this.scrollToBottom;话说回来，// 打完后停止计时器并恢复输入状态
if {
clearInterval;this.typingTimer = -1;this.isSending = false;}
},60)，// 每60ms 输出一个字符，可自行调节速度
},500);// 思考延迟500ms

}

• `setTimeout` → 模拟 AI 思考时间；`setInterval` → 实现逐字符输出；话说回来，`slice` → 截取递增子串；话说回来，`map` → 更新指定列表项而不改变其它项。
"
• `typingTimer` 用于后续 `clearInterval` 与生命周期清理。"
"

​

关键步骤拆解

1️⃣ 准备完整回复文本 – fullText 为最终要展示的全部文字。

2️⃣ 创建占位 AI 消息 – content:'AI 正在思考...' 给使用者即时反馈。

3️⃣ 延迟启动 – setTimeout 模拟思考延迟。其实，

4️⃣ 通过 currentIndex 控制进度 – 每次自增后截取子串。

5️⃣ 用 slice 获取当前要显示的文字 – 实现“打字机”。

6️⃣ 用 map 更新同一条记录 – 保证 UI 能感知到 content 的变化。

7️⃣ 结束条件 – 当已输出全部字符后清除计时器并恢复 isSending=false。话说回来，

---

E十二、为什么使用 map 更新单条消息？

• •遍历整个数组，仅对匹配 ID 的那项返回新对象，其余保持不变•
• •返回全新数组。触发响应式框架重新渲染•
• •不会产生副作用•
<\/ ul>

---

E十三、ForEach key 必须同步内容变化才能刷新列表 ts ForEach(this.chatList,=>{/* 渲染 */},=>`${item.id}-${item.content}`);// ✅ key 包含动态 content 若仅使用 `item.id` 做 key。则内容变化而 key 不变，导致 UI 重用旧节点，不会出现逐字刷新。

---

E十四、关于组件生命周期的定时器清理 ts aboutToDisappear: void { if { clearInterval;this.typingTimer=-1;} } 确保页面销毁前彻底关闭所有计时任务，防止内存泄漏和异常。其实，

---

E十五、滚动到底部实现细节 ts scrollToBottom: void{ setTimeout=>{ this.listScroller.scrollToIndex;})，}

• 使用 setTimeout 等待 UI 完成渲染后再滚动，提高可靠性。
• 滚动目标为 chatList.length确保最新内容可见。

---

E十六、本次 Git 工作流

bash git checkout ai-chat # 切换主分支 git pull origin ai-chat # 拉取最新代码 git checkout -b feature/chat-typewriter-reply # 创建功能分支

git add entry/src/main/ets/pages/Setting.ets docs/-chat-typewriter-reply.md git commit -m "feat: add typewriter reply effect" git push origin feature/chat-typewriter-reply

git checkout ai-chat git pull origin ai-chat git branch -d feature/chat-typewriter-reply

---

E十七、本次练习

• * 打字机主要是 完整文本 + 定时递增索引 + slice + map 更新。
• 数组操作原则的观点是。新增用 concat，新建数组触发渲染；更新用 map，一样返回新数组*。
• 列表渲染关键 —— ForEach 的 key 必须随可视属性变化 （本例中加入了 content) *。
• 生命周期里务必清理异步任务，以免页面销毁后仍残留计时器*。话说回来，*
<\/ ul>

---

以上即为《鸿蒙聊天 Demo练习——AI回复与刷新问题处理》完整排版与痛点解析。请直接复制使用，

。

---