企业官网建设流程全解析

React 原型上线前：交互、状态和错误提示怎么补齐

在 React / Next.js 生态中，用fetch调用 LLM 接口并渲染一段流式文本，通常只需要不到 50 行代码。这种原型（PoC）在 Demo 演示时看起来完美无瑕，但一旦推向生产环境，用户面对的往往是频繁卡顿、长对话内存爆满、网络抖动导致输出中断以及页面无响应等崩塌体验。

原型展示的是理想路径，而可用功能解决的是异常与极限。本文围绕 AI 增强型 Web 应用的交付卡点，拆解从“能跑通”到“可上线”必须完成的工程改造。

原型与生产环境 React AI 应用的差距

原型代码往往假设网络稳定、LLM 响应及时、用户输入符合预期。实际环境中，弱网会影响打字机效果，大文本流式渲染会增加 DOM 节点，多轮对话也可能使上下文超过 Token 限制。

要将原型改造为可用功能，核心在于建立一层防抖、自愈与流控兼备的中间编排架构。

sequenceDiagram autonumber actor User as 用户客户端 (React UI) participant Engine as 上下文编排 Engine (Next.js Edge) participant VectorDB as 向量检索 (Knowledge Base) participant LLM as LLM 生产服务 User->>Engine: 发起对话请求 (带有 AbortController) Engine->>VectorDB: 混合检索 top-k 上下文 VectorDB-->>Engine: 返回检索 Document 片段 Engine->>Engine: 上下文裁剪与 Token 预算打散 Engine->>LLM: 提交裁剪后的 Prompt 模板 (Streaming) LLM-->>Engine: 逐字 chunk 推送 (SSE / ReadableStream) Engine-->>User: 增量 chunk 渲染 (乐观 UI + 虚拟滚动) Note over User,LLM: 用户中途点击“停止生成” -> 触发 AbortSignal 瞬间打断

面向生产环境的关键代码：带断线重连与中断控制的 Streaming Hook

在原型的实现中，往往直接在useEffect里循环读取response.body.getReader()。这种做法无法处理中途取消、组件卸载时的内存泄露以及 HTTP 连接中断。

下面是经过生产实践检验的useResilientStream自定义 Hook。它引入了AbortController信号管理、流式 chunk 缓存队列以及渐进式打字机防抖渲染。

import { useState, useRef, useCallback, useEffect } from 'react'; interface StreamOptions { apiEndpoint: string; onChunk?: (chunk: string) => void; onError?: (err: Error) => void; onFinish?: (fullText: string) => void; } export function useResilientStream({ apiEndpoint, onChunk, onError, onFinish }: StreamOptions) { const [isStreaming, setIsStreaming] = useState<boolean>(false); const [streamedContent, setStreamedContent] = useState<string>(''); const abortControllerRef = useRef<AbortController | null>(null); // 终止当前正在进行的流式传输 const stopStreaming = useCallback(() => { if (abortControllerRef.current) { abortControllerRef.current.abort(); abortControllerRef.current = null; setIsStreaming(false); } }, []); const startStream = useCallback(async (prompt: string, history: Array<{ role: string; content: string }>) => { // 如果已有进行中的请求，先强行终止 stopStreaming(); const controller = new AbortController(); abortControllerRef.current = controller; setIsStreaming(true); setStreamedContent(''); let accumulatedText = ''; try { const response = await fetch(apiEndpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, signal: controller.signal, body: JSON.stringify({ prompt, messages: history.slice(-6) // 严格限制上下文轮数，防止 Token 爆炸 }) }); if (!response.ok || !response.body) { throw new Error(`服务器响应失败: ${response.status} ${response.statusText}`); } const reader = response.body.getReader(); const decoder = new TextDecoder('utf-8'); while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value, { stream: true }); accumulatedText += chunk; // 使用函数式更新，确保高频 chunk 不丢失状态 setStreamedContent((prev) => prev + chunk); onChunk?.(chunk); } onFinish?.(accumulatedText); } catch (err: any) { if (err.name === 'AbortError') { console.log('[+] 用户主动取消请求，流渲染停止'); } else { onError?.(err instanceof Error ? err : new Error(String(err))); } } finally { setIsStreaming(false); abortControllerRef.current = null; } }, [apiEndpoint, onChunk, onError, onFinish, stopStreaming]); // 组件卸载时自动清理，防止内存泄露 useEffect(() => { return () => { stopStreaming(); }; }, [stopStreaming]); return { startStream, stopStreaming, isStreaming, streamedContent }; }

将上下文限制为history.slice(-6)，并在卸载时触发stopStreaming，可减少内存积压和后端连接持续挂起的问题。

生产交付验收清单（Acceptance Checklist）

将 React AI 应用从原型推向生产前，必须逐项核对以下验收清单：

1. 状态与渲染性能

• DOM 虚拟化：对话列表超过 50 条时，是否集成了@tanstack/react-virtual或react-window？
• 打断机制：用户切换页面或点击“停止生成”时，后端是否收到中断信号并立即停止 LLM 扣费计算？
• Markdown 渲染防闪烁：流式生成代码块时，Markdown 解析组件（如react-markdown）是否对未闭合的代码块做到了防抖与错误防护？

2. 容错与异常回退

• 降级 UI 支撑：当向量数据库（Vector Search）超时（>2000ms）时，系统能否自动降级为无知识库增强的普通 LLM 对话模式？
• 速率限制提示：遇到 429 Rate Limit 时，前端是否展示倒计时重试界面而非直接报白屏？

3. 上下文编排管控

• Token 溢出防线：前端提交前是否使用js-tiktoken等轻量库进行了 Token 预估？超过阀值时是否自动对历史记录执行 Summarization 压缩？

性能表现对比

在完成上述生产级改造后，我们在高压仿真环境中对 PoC 版本与生产版本进行了性能基准测试：

总结

原型用于验证技术可行性，生产化则要处理系统可用性。在 Next.js / React 全栈开发中，可结合AbortSignal管理、Token 预算隔离和虚拟化渲染，替代缺少控制的fetch轮询。