React 筑基：从零到上手的 100 次心跳

React Router 6 用 Routes+Route 声明路由，useNavigate 跳转；参数用 useParams、useSearchParams；守卫用 Outlet+Navigate；

一篇文章搞定 React 生命周期：用真实场景（首屏骨架屏、长列表滚动、弹窗动画、热更新、异常兜底）分别演示类组件 4 大钩子与函数组件 4 大 Hooks，附 2025 选型速查表，复制即可用。

React 界面更新 = setState 触发 → Fiber 调度 → 可中断渲染 → 同步 Commit → 浏览器绘制，附并发示例与 6 步链路图，面试秒答。

React 事件绑定不再懵圈！本文从类组件到函数组件，从基本绑定到防抖节流、事件委托、自定义事件，5 分钟带你吃透 React 事件处理，附 7 个实战技巧，面试不慌。

> 面试 3 连问： > 1. setState 是同步还是异步？ > 2. 为什么连续 setState 只渲染一次？ > 3. 怎样在 setState 后拿到最新 DOM？

把 React 官方文档三大基础模块「显示数据、条件渲染、渲染列表」浓缩成 1 张速查卡：花括号 `{}` 插值、早返回 / 三元 / && 条件、`map` + 唯一 `key` 列表

1. 花括号能放什么？ 2. 对象为何不能当子元素？ 3. map 循环忘写 key 会怎样？ 4. key 用索引安全吗？ 5. key 与 props 同名为何还要再传？

React 添加样式的三种姿势 一句话总结：在 React 里写样式，没有银弹，只有场景。 一张表、三段代码、五个踩坑点，帮你在 MVP、业务迭代、设计系统三阶段快速选型。

JSX=HTML写法+JS逻辑，编译后仍是React.createElement；牢记className、花括号、Fragment三大差异，十分钟上手。

5分钟速通：用函数组件+Props像搭乐高一样创建并嵌套React组件，告别Class繁琐，秒变野生前端。

30 min 极速上手 React 18 + TS：计数器 & TodoList 双示例，Vite 零配置开箱即跑。适合前端新人 1:1 复刻。