端侧AI实战第二章：React组件工程化 + 事件系统 + 可复用进度条（WebGPU模型加载底座）

大家好，在上一章 《抛弃云端API，WebGPU浏览器本地跑通DeepSeek大模型》 中，我们完成了项目架构搭建、WebGPU环境检测、基础页面布局，彻底搞懂了端侧AI对比云端API的核心优势。

本章我们进入工程化进阶实战 ，AI项目不同于普通后台管理系统，存在大文件模型加载、进度监听、状态切换、异步交互等复杂场景。

所以这一章我们重点解决：如何用React工程化思维搭建可维护、可复用的端侧AI项目。核心落地：组件拆分思想、React合成事件原理、封装通用模型进度条组件、状态驱动模型加载视图，为下一章真正加载ONNX模型打下坚实基础。

一、为什么AI前端项目必须用React？（面试/简历核心亮点）

很多初学者疑惑：Vue上手更快、语法更简洁，为什么主流AI项目、大模型交互系统、AI训练可视化项目，清一色使用 React + TS？

1. 项目体量适配性

Vue 语法糖丰富、低门槛，适合中小型快速迭代项目；而React 语法更严谨、函数式编程思想纯粹、工程化约束更强，是大型复杂项目的首选。

端侧AI项目涉及模型加载、异步推理、进度监听、状态多级切换、组件嵌套渲染，业务逻辑远比普通页面复杂，React的架构优势完全凸显。

2. AI生态绝对垄断

目前全球绝大多数 AI 前端训练代码、推理demo、WebGPU算力适配、Transformers.js 案例，全部基于React生态开发，Vue相关生态极少。做AI前端，React是必备技术栈。

3. 工程化规范：ESLint + TS 强约束

本项目采用 React + TS + ESLint 企业级标配组合：

TS：类型校验，规避模型加载、参数传递的隐性报错
ESLint：统一团队代码风格，约束语法规范，大公司大型项目必备

二、核心技术原理精讲（面试高频）

1. JSX 与 className 底层原理

JSX 是 React 核心特性，全称 JavaScript + XML，允许在 JS 代码中直接编写 HTML 标签，编译后转为原生DOM操作，极大提升UI开发效率。

新手最容易踩坑：JSX 中不能使用 class 定义样式。

因为 class 是 JS 面向对象的保留关键字，用于声明类。所以 React 专门使用 className 代替原生HTML的class属性，完美规避语法冲突。

2. TailwindCSS 原子化CSS革命性优势

传统开发手写CSS选择器、样式规则，属于底层低效编程，重复代码多、维护成本高。

TailwindCSS 是现代AI项目、Vibe Coding 标配UI框架，核心原理：

不编写原生CSS样式，内置大量原子化CSS类名
依托Vite插件，自动扫描页面使用的类名，按需打包注入样式
语义化极强，自然语义编程，组合类名即可实现复杂布局

本项目所有布局、居中、配色、hover交互，全部通过Tailwind原子类实现，真正做到零手写CSS。

3. React 合成事件（高阶前端必备）

很多人只会写 onClick，却不懂底层原理，这是区分初级、中级前端的关键。

原生DOM事件迭代：

DOM0级 ：行内绑定 onclick，结构与逻辑耦合，无法绑定多个事件
DOM2级 ：addEventListener，支持同一元素多事件绑定，模块化分离

React 遵循最小创新原则，不发明新语法，直接复用原生事件概念：

React 中的 onClick并不是原生DOM事件 ，而是合成事件。底层做了事件委托、浏览器兼容封装、性能优化，统一了不同浏览器的事件执行机制。

这也是React代码洁癖、工程化优雅的体现。

三、前端工程化核心：组件拆分与组件树思想

1. Vue vs React 组件本质区别

Vue组件：三明治结构，一个文件包含 template、script、style，入门简单、结构固定。

React组件 ：函数即组件，一个返回JSX的函数就是独立组件。

函数内部写JS逻辑，返回值渲染UI，样式通过Tailwind或外部引入，逻辑与视图高度融合，更适合复杂AI业务逻辑封装。

2. 组件化的核心价值（项目亮点）

前端项目从DOM树迭代为组件树，是行业发展的必然趋势：

页面结构清晰，通过组件树可直观看到页面组成
独立模块抽离，复用性极强（如本章进度条组件）
粒度细分，团队协作互不冲突
维护性极高，修改子组件不影响整体项目

四、核心实战：封装可复用模型进度条组件

在端侧AI场景中，模型（.onnx）文件体积巨大，加载耗时久，进度条展示是核心交互体验。我们将进度模块从页面抽离，封装为通用业务组件。

1. 新建组件 `Progress.tsx`

通过props接收动态参数，实现任意文件、任意进度、任意大小的通用展示，彻底解耦业务页面。

typescript 复制代码

// 纯展示复用组件，无内部状态，由父组件数据驱动
type ProgressProps = {
  text: string;
  percentage: number;
  total: number;
}

// 函数 = 组件，props接收父组件传递数据
const Progress = ({ text, percentage, total }: ProgressProps) => {
  return (
    <div className="w-full bg-gray-100 rounded-md p-3 my-2">
      <p className="text-sm text-gray-700 mb-1">文件：{text}</p>
      <p className="text-xs text-gray-500">
        已加载：{percentage} / 总大小：{total}
      </p>
    </div>
  )
}

export default Progress

2. 父组件引入 + 数组循环渲染

React 不发明新语法，直接使用原生 Array.map 实现列表渲染，对比Vue的v-for，更贴合JS原生语法，学习成本更低、灵活性更高。

五、整合完整版业务逻辑（状态驱动模型加载）

本章核心业务逻辑：响应式数据驱动视图，完全摒弃原生DOM操作。通过 useState 管理模型状态、错误状态、加载进度，点击按钮触发状态变更，自动更新页面UI。