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 组织逻辑。