目录

1. 从原生事件到 React 合成事件
2. Load Model 按钮：onClick 触发状态切换
3. map 列表渲染：让 Vue 开发者秒懂的 React 哲学
4. Progress 组件：抽离、传参、复用

一、从原生事件到 React 合成事件

第一篇搭好了静态页面骨架——标题、描述文字、模型介绍、空白的进度条区域。这一篇要让页面动起来点击按钮 → 触发下载 → 进度条实时更新。

这一切的起点是事件处理。在 React 中，按钮的点击事件写作 onClick这背后有一段 DOM 事件标准的演进史。

DOM 事件的三代演化

按钮

DOM 级事件直接写在 HTML 属性里JS 与 HTML 耦合在一起，不符合模块化分离原则。

// 第2代：addEventListener
document.getElementById
.addEventListener {
console.log;})，

addEventListener 将 JS 逻辑从 HTML 中分离，而且支持同一个元素多次监听同一个事件——这是内联属性做不到的。

flowchart LR
A --> B
B --> C
A ---|JS与HTML耦合| A
B ---|分离但需手动管理| B
C ---|自动委托 跨浏览器兼容| C

React 的取舍：不发明新概念

Vue 用 @click/v-on:click 等自定义语法绑定事件。 React 则直接使用已有的 JavaScript 概念——onClick 是 HTML 的 onclick 的驼峰写法，对有 JS 基础的开发者没有额外学习成本。

痛点一：很多新手误以为 onClick 就是原生 click，需要自行处理兼容性和解绑。

但 React 的 onClick 不是原生 DOM 事件，而是合成事件**。

使用者点击 → 原生 click 事件 → React 事件程序 → 合成事件对象 → onClick 回调

合成事件做了三件事：

• 跨浏览器兼容：抹平不同浏览器差异。
• 统一委托：不在每个元素上单独绑定，在根节点统一管理。
• 自动清理：组件卸载时无需手动调用 removeEventListener.

二、Load Model 按钮：onClick 触发状态切换

理解了合成事件机制后来看 App 中的 Load Model 按钮——整个页面的“启动键”。它同时承担了交互设计与状态控制两大职责。

 { setStatus;}}
>
Load Model

disabled 状态控制

disabled={status!== null || error!== null}

mermaid flowchart LR A --> B B --> C A ---|JS与HTML耦合| A B ---|分离但需手动管理| B C ---|自动委托 跨浏览器兼容| C

React 的取舍：不发明新概念 ​​ / h3>