前言

最近在接触一个有意思的项目——在浏览器里用 WebGPU 跑 DeepSeek‑R1 蒸馏模型。项目本身涉及 AI 推理，但作为前端学习者。我更关注的是：

这个页面的前端逻辑是怎么组织的？React 到底在解决什么问题？

这篇文章是我在学习过程中的笔记整理。从一个真实的 demo 代码出发，一步步拆解 React 的主要概念。按理说，不堆术语，尽量用“人话”讲清楚每一个“为什么”。

再看读完你会理解，

• React 和 Vue 到底有什么本质区别？
• 事件监听从 DOM0 到 React 合成事件经历了什么？
• 为什么要拆组件？ Props 又是干什么的？

痛点梳理的观点是。你可能遇到的问题

• 事件绑定混乱：同一个元素上既能用 onclick 也能用 addEventListener，容易导致覆盖、顺序不确定。
• 关注点不分离：HTML 内联写法把结构、样式、行为耦合在一起，维护成本高。
• 缺乏细粒度控制：DOM0 方式无法设置捕获/冒泡阶段、once、passive 等选项。
• 组件拆分困难：没有统一规范。很难决定何时拆成子组件，也不知道 Props 的真正作用。
• 状态管理混乱：直接修改 DOM 或全局变量导致 UI 与数据不同步。

一、先看一个最原始的按钮

1. 最简单的 HTML + JS 示例

按钮

同一个按钮，两种事件绑定方式同时存在。这就引出了第一个问题：onclick 和 addEventListener 到底有什么不同？

DOM0 级事件 —— onclick

onclick 是最原始的事件绑定方式，属于 DOM Level 。

写法：

按钮

致命缺点：