三、React核心难点：受控组件与输入框交互

AI对话项目的核心交互就是输入框，Vue支持双向绑定，而React严格单向数据流，没有双向绑定。

我们手动实现受控输入框，也是面试必问考点。

1. 核心原理

• value 绑定 state：输入框的值完全由input状态控制
• onInput 监听更新：通过事件对象拿到输入值，更新state
• TS类型断言：解决TS事件对象类型不确定问题，as HTMLTextAreaElement

const [input, setInput] = useState("");// 输入框受控绑定value={input}onInput={(e) => {// TS类型断言，精准获取输入框valueconst target = e.target as HTMLTextAreaElement;setInput(target.value);}}/>

2. 智能键盘回车发送逻辑

实现主流AI产品交互逻辑：回车发送，Shift+回车换行，体验媲美ChatGPT。

onKeyDown={(e) => {// 有内容、按下回车、没有按住shift = 触发发送if (input.length > 0 && e.key === 'Enter' && !e.shiftKey) {e.preventDefault(); // 阻止默认换行onEnter(); // 触发AI发送事件}}}

3. 模型状态锁（AI项目核心体验优化）

模型未加载完成、加载中时，禁止输入和发送，防止用户误操作：

disabled={status!=='ready'}

通过模型状态 status 全局锁控交互，是专业AI项目的标配逻辑。

四、完整App业务逻辑整合（本章最终成果）

整合状态管理、WebGPU检测、进度条组件、受控输入框、发送事件、状态锁，形成完整可扩展的端侧AI项目底座。

import { useState, useEffect } from 'react';import Progress from './components/Progress';function App() {// 对话输入状态const [input, setInput] = useState("");// 模型状态：ready/loading/errorconst [status, setStatus] = useState("ready");// 全局错误状态const [error, setError] = useState(null);// 加载文案const [loadingMessage, setLoadingMessage] = useState("开始加载");// 模型文件进度列表const [progressItems, setProgressItems] = useState([]);// WebGPU 环境检测（浏览器端侧AI必备）const IS_WEBGPU_AVALABLE = !!navigator.gpu;// AI发送事件（预留下一章推理逻辑）const onEnter = () => {// 下一章接入transformers.js本地推理console.log("发送对话：", input);};// 组件挂载生命周期useEffect(() => {console.log('AI主组件挂载完成，等待模型加载');}, []);return (IS_WEBGPU_AVALABLE ? (

五、本章核心知识点与简历亮点（重点背诵）

1. 组件工程化能力

封装高容错、可复用模型进度条组件，通过??=空值合并运算符做兜底处理，结合字节格式化工具，适配任意ONNX模型文件加载场景，实现组件健壮性优化。

2. React数据流思想

严格区分 State（组件私有状态）与 Props（父传子只读数据），遵循单向数据流，视图由数据驱动，无冗余DOM操作，适配大型AI项目架构。

3. 受控组件实战

手动实现Textarea受控输入，通过TS类型断言解决事件对象类型问题，实现「回车发送、Shift回车换行」行业标准交互。

4. AI业务专属状态锁

基于模型 status 状态全局控制交互可用性，加载中禁用输入、按钮，规避用户误操作，优化端侧AI产品体验。

六、下期预告

前三章我们完成了：项目架构、页面布局、组件封装、交互底座、数据流规范。

第四章进入项目核心硬核功能：

接入Transformers.js + ONNX Runtime Web，真实拉取 HuggingFace 开源模型，实现浏览器自动下载模型、实时进度监听、本地离线大模型推理、流式对话返回！

持续更新全网最细《WebGPU端侧大模型实战》系列，点赞收藏跟进更新！