Series12 entries
React Runtime
How UI becomes scheduled work.
2026
Thinking in React：从五个不变量理解 React UI RuntimeReact 高级工程能力不是记忆 API，而是在复杂 Runtime 中维护不变量。从 Environment、Description、Ownership、Scheduling、Browser Cost 五个 Law 建立 React Mental Model，设计能够抵抗 SSR、Concurrency、RSC 和 Browser Physics 的组件。React 不是框架，是 UI Runtime：从 Fiber 到调度器的完整心智模型从 beginWork / completeWork 到 Lane 模型，从 bailout 机制到 useEffect 的真正含义——搞懂这些，React 的 API 就不重要了React Effect：为什么副作用必须脱离 Render从忘掉生命周期到理解 Effect 的真正含义——探索 React 如何通过纯 Render 与 Effect 阶段保证 UI 更新的确定性让动态世界拥有确定性（二）：React 如何让 UI 更新变得可调度setState、Fiber Tree、Lanes Priority、Scheduler 与 Concurrent Rendering 如何协作，让一次状态更新从同步阻塞变成可暂停、恢复、抢占的任务React 19 并发全景：从用户点击到 UI 更新的完整链路Transition、Suspense、useOptimistic、useFormStatus、useActionState——不是五个独立 API，而是一条完整链路的五个阶段RSC 设计哲学：React 如何跨越两台计算机从 'use client' 是什么到 Progressive JSON——Dan Abramov 2024-2025 年 RSC 系列核心思想提炼React vs Vue 3 架构全景：从浏览器渲染管线到框架设计哲学两个框架面对同一个浏览器，给出了完全不同的答案——搞清楚'为什么'比'是什么'重要Error Boundary 与渲染失败的 Ownership一个组件报错，怎样避免整个页面白屏？梳理错误边界能捕获什么，以及该放在哪一层。Suspense 深度解析：从 Thenable 协议到流式渲染的完整机制组件等待数据时，React 如何暂停、重试并逐步显示内容？从 Thenable 读到流式渲染。状态管理的边界：Context、External Store、Atom 模型Context 什么时候不够用？沿着更新传播与订阅粒度，比较 Zustand 和 Jotai 的适用场景。组件设计模式：从 Runtime 约束推导组件 API一个组件该接收哪些 props、把状态交给谁？从 React 的约束推导组合、受控与 ref 的设计。React Component Tree：从 Mount 到 Fiber Runtime 的一条主线从 mount container、React Element、Fiber、Context、Reconciliation、Hooks、Lane、Scheduler 到 beginWork / completeWork，用一棵 Component Tree 串起 React Runtime 的核心机制。