React入门体验
从 JSX、组件、事件、状态到 Hook 的角度整理 React 初学阶段最重要的入门主线。
#tech / dev / frame
#resource / react
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: React MOC
- 主题入口: React
- 学习路径: react-learning-roadmap
- 相关概念: jsx, React中的props、state和ref, React中的事件处理与状态更新, React Hooks
React入门体验
这页不再承担零散教程笔记的角色，而是把 React 初学阶段最容易混在一起的几层内容重新排成一条主线：先看 UI 怎么写，再看交互怎么发生，最后看状态和 Hook 怎么组织。
入门时最先要抓住什么
不是先背 Hook 名字，而是先接受 React 的核心模型：UI = f(state)。
也就是说：
- 组件负责描述界面
- 状态决定界面长什么样
- 事件负责触发状态变化
- React 根据新状态重新计算 UI
一条最短入门主线
先看 JSX
JSX 决定你如何在 JavaScript 里描述 UI。见 jsx。
再看组件和数据输入
组件之间最先要分清的是 props、state 和 ref 的边界。见 React中的props、state和ref。
再看事件与更新
点击、输入、提交这些交互，本质上是事件触发状态变化。见 React中的事件处理与状态更新。
最后再进入 Hooks
Hooks 不是额外附加物，而是函数组件里组织状态、引用和副作用的方式。见 React Hooks。
初学者最容易混淆的几件事
JSX 不等于 HTML
它只是更接近标签写法的 UI 表达层。
事件处理不等于直接改 DOM
React 的主线是改状态，再让渲染结果变化。
Hook 不等于“到处都能调用的普通函数”
Hook 只能在组件或其他 Hook 的顶层调用，这和 React 依赖调用顺序组织状态有关。
如果你已经写过一点 demo
接下来最值得继续补的不是更多示例，而是这几层边界：
最短记忆方式
React 入门主线 = JSX 描述 UI -> 事件触发更新 -> 状态驱动界面 -> Hooks 组织逻辑。