建立核心心智模型
把React的运行机制浓缩为一句话：
React 是一个“内存里的照片冲洗店”：你给它状态（底片），它在内存里比对差异（洗照片），最后只把变化的部分贴到浏览器（相册）上。
只要记住这三个核心角色，所有原理都能对号入座：
| 角色 | 对应原理 | 一句话解释 |
|---|---|---|
| 底片 | State / Props | 描述UI当前应该长什么样的数据。 |
| 暗房（内存） | Virtual DOM / Fiber 树 | 在JavaScript内存中进行计算的地方，速度极快。 |
| 相册 | 真实 DOM / 屏幕 | 用户最终看到的、操作代价昂贵的浏览器界面。 |
| 冲洗工 | 调度器 + 协调器 | 决定哪张底片先洗（优先级），并只把变化的地方贴上去（Diff）。 |
用生活类比“串起”所有机制
把React的整个工作流想象成一家高效运转的餐厅后厨：
- 点菜（触发更新） ：用户点击按钮（
setState），相当于客人下单。 - 写单子（创建 Update） ：服务员把订单写成小票（
Update对象），贴在环形钉板（updateQueue）上。 - 排菜顺序（调度器 Scheduler） ：厨师长（调度器）看一眼订单。如果客人催得急（高优任务，如输入框），就插队先做；如果不急（
startTransition低优任务），就等锅有空再做。 - 备菜（Render 阶段） ：主厨（协调器）拿到订单，先在备菜区（内存中的 Fiber 树） 照着菜单切菜配菜（执行组件函数，构建虚拟DOM）。这个过程中，如果客人突然催单（高优任务插入），主厨可以放下手里的活（可中断），先去处理急单。
- 出锅（Commit 阶段） ：菜全部备好，主厨必须一气呵成地把菜倒进锅里翻炒出锅（同步不可中断，操作真实DOM），然后让服务员端出去（
useLayoutEffect同步执行）。 - 上桌（浏览器绘制） ：客人看到菜（屏幕刷新）。
- 饭后回访（useEffect） ：等客人吃上了（绘制完成），服务员才去询问口味怎么样（
useEffect异步执行），绝不耽误客人吃饭。
记住这个后厨模型：调度器（排单） → 备菜可中断（Render） → 炒菜不可中断（Commit） → 上桌后回访（useEffect）。
