随着2024年国内大模型业务需求的发展,前端领域打字机效果组件已广泛应用于多种网站和应用程序中,有效增强了网站的动态性与交互性。
+本文旨在深入探讨如何从基础开始,逐步开发实现简易版的一个打字机效果的流式组件,包括示例代码及其详细解释。
+ +效果
+一、初始准备
开始开发前,我们首先需要准备一些基础内容。本次示例中,我们将以一个Markdown文本数据作为打字机效果的内容来源。这不仅能够模拟实际开发中的场景,也便于我们展示如何处理和展示复杂文本。
+示例Markdown文本
我们的Markdown文本包含了标题、文本格式(如粗体、斜体)、图片和表格等元素,这些都是Markdown常用的标记元素。通过对这些不同类型的内容进行逐字展示,我们可以演示打字机效果处理复杂文本的能力。
+1 | export const mockMarkdownStr = ` |
二、代码实现
实现打字机效果涉及三个部分:
+-
+
- 核心逻辑
TypeWriterCore
+ - Hook封装
useTypeWriter
+ - React组件实现
TypeWriter Components
三个部分业务侧可按需取用,以下部分将详细介绍每一部分的实现逻辑及关键代码。
+
1. TypeWriterCore.ts
- 打字机核心逻辑
TypeWriterCore.ts
文件中定义了TypeWriterCore
类,这个类封装了打字机效果的核心逻辑。通过构造函数,我们可以传入不同的配置选项,如打字速度、暂停时间等,以适应不同的使用场景。
1 | interface TypeWriterCoreOptions { |
2. useTypeWriter.ts
- Hook封装
通过HookuseTypeWriter
封装TypeWriterCore
类,提供简洁的接口,使得在React或Vue组件中易于实现打字机效果。
代码示例如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36import {useEffect, useState, useMemo} from 'react';
import TypeWriterCore from './TypeWriterCore';
interface UseWriterOptions {
maxStepSeconds?: number; // 将 maxStepSeconds 定义为可选的
}
export const useTypeWriter = (
{text, options}:
{ text: string, options?: UseWriterOptions }
) => {
const [typedText, setTypedText] = useState('');
const typingCore = useMemo(
() => new TypeWriterCore(
{
onConsume: (str: string) => setTypedText(prev => prev + str),
...options,
}
),
[]
);
useEffect(
() => {
typingCore.onRendered(); // 渲染完成 => 清空定时器
typingCore.add(text);
typingCore.start();
return () => typingCore.onRendered(); // 渲染完成 => 清空定时器
},
[text]
);
return [typedText];
};
3. index.tsx
- 组件实现示例
这个文件展示了如何在React组件中使用useTypeWriter
Hook来实现打字机效果。以下是实现的关键部分:
1 | import React from 'react'; |
通过这三个文件的详细解析和代码实现,我们展示了从核心逻辑的构建到在React组件中的应用,如何逐步开发一个打字机效果的流式组件。
+三、应用示例
1、模拟流式文本消息推送:
以下示例展示如何模拟SSE(Server-Sent Events)文本消息推送,模拟实时数据流的场景。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24export const simulateWebSocketPush = (text, onDataReceived) => {
const words = text.split(/([\s,。;:!、])/); // 在标点符号前后插入分隔符,以便保留标点符号
let currentIndex = 0;
// 模拟推送函数
function pushNextChunk() {
const chunkSize = Math.floor(Math.random() * 5) + 1; // 随机生成 1 到 5 的字数
const currentChunk = words.slice(currentIndex, currentIndex + chunkSize).join('');
currentIndex += chunkSize;
// 模拟推送,实际中需要通过 WebSocket 推送给客户端
// 这里将数据通过回调函数传递给调用方
onDataReceived(currentChunk);
// 继续推送,直到所有文字都被推送完
if (currentIndex < words.length) {
const interval = Math.floor(Math.random() * 500) + 1000; // 随机生成时间间隔
setTimeout(pushNextChunk, interval);
}
}
// 开始推送
pushNextChunk();
};
2. 使用示例React
此示例展示如何在应用中模拟文本数据传入,实现打字机效果。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27import {useEffect, useState} from 'react';
import {TypingWriter} from 'ui-type-writer';
import {simulateWebSocketPush} from '@/utils';
import {mockMarkdownStr} from '@/mock/index'
export default function App() {
const [markdownContent, setMarkdownContent] = useState(' ');
useEffect(
() => {
// 在组件挂载时开始模拟WebSocket推送
simulateWebSocketPush(mockMarkdownStr, data => {
// 这里处理每次推送的数据,可以将数据存储到状态中,或者进行其他操作
// 在每次推送时拼接数据
setMarkdownContent(data);
});
// 清理定时器或其他资源
return () => {};
},
[]
);
return (
<TypingWriter text={markdownContent} />
);
}
npm包发布
打字机效果组件已发布到npm,未进行预编译,可以在目录下直接调试。
+1 | npm install ui-type-writer |
+
希望本文能为您提供有价值的参考与指导,如有疑问或建议,敬请留言讨论。
+ +