Index36 entries
Writing
浏览器、运行时与工程实践。写下那些值得反复确认的细节。
2026
React Component Tree：从 Mount 到 Fiber Runtime 的一条主线从 mount container、React Element、Fiber、Context、Reconciliation、Hooks、Lane、Scheduler 到 beginWork / completeWork，用一棵 Component Tree 串起 React Runtime 的核心机制。折腾了这么多前端工具，最后我只留下这几个东西前端工具不断换新，哪些知识值得留下？梳理类型、UI、浏览器和工程架构四层理解。组件设计模式：从 Runtime 约束推导组件 API一个组件该接收哪些 props、把状态交给谁？从 React 的约束推导组合、受控与 ref 的设计。状态管理的边界：Context、External Store、Atom 模型Context 什么时候不够用？沿着更新传播与订阅粒度，比较 Zustand 和 Jotai 的适用场景。Suspense 深度解析：从 Thenable 协议到流式渲染的完整机制组件等待数据时，React 如何暂停、重试并逐步显示内容？从 Thenable 读到流式渲染。TypeScript + React：从 Type 到 Reality类型检查通过后，UI 是怎样出现在屏幕上的？分清 TypeScript、React 与浏览器各自的职责。Error Boundary 与渲染失败的 Ownership一个组件报错，怎样避免整个页面白屏？梳理错误边界能捕获什么，以及该放在哪一层。Type-driven React：类型驱动的组件设计如何让组件 API 更难被用错？从允许的状态出发，用类型约束 props，再写实现。从 glob 扫描到文件路由：我在 create-lve 中的路由选型之路构建前端脚手架 CLI 时，我在 React Router 和 TanStack Router 之间反复横跳的真实经历——以及为什么最终选择了做减法条件类型与 Discriminated UnionsTypeScript 不只是描述数据结构，还可以描述系统允许存在的状态空间Thinking in React：从五个不变量理解 React UI RuntimeReact 高级工程能力不是记忆 API，而是在复杂 Runtime 中维护不变量。从 Environment、Description、Ownership、Scheduling、Browser Cost 五个 Law 建立 React Mental Model，设计能够抵抗 SSR、Concurrency、RSC 和 Browser Physics 的组件。三套路由器，同一个 History：设计哲学对比vue-router、react-router、tanstack-router 三家路由器的底层实现对比与设计哲学分析，以及如何选择适合你的路由方案vue-router 源码深度解析：History、Matcher、Guards 实现细节从 History API 封装、路径匹配算法、导航守卫系统、滚动恢复、URL 编码等维度，深度拆解 vue-router v5 的源码实现react-router v8 源码深度解析：loader/action、middleware、Fog of War从 History 封装、路由匹配、loader/action 数据模型、middleware、并发控制、Fog of War 等维度，深度拆解 react-router v8 的源码实现tanstack-router 源码深度解析：类型安全、LRU Cache、结构化共享从 History 拦截、Segment Trie 路由匹配、beforeLoad/loader 数据模型、LRU Cache、结构化共享、类型安全等维度，深度拆解 tanstack-router 的源码实现泛型：让逻辑与类型解耦泛型解决的不是'高级语法问题'，而是'逻辑相同，但数据类型不同'的问题类型系统的核心：结构化类型TypeScript 不是问'你是不是这个类型？'，而是在问'你的结构是否满足这个类型？'TypeScript 的本质：编译时约束TypeScript 不是运行时验证——它是在程序运行之前，通过静态分析缩小错误空间一行命令部署前端项目：从手动拖文件到 rsync 自动化SSH 密钥 + rsync + shell 脚本，把前端部署从 10 分钟压缩到 10 秒为什么 Vue/Angular 生态需要额外的工具链TypeScript 编译器能直接理解什么，与框架自己定义的文件格式之间存在边界——这是设计选择，不是优劣问题为什么 React 的 TypeScript 体验如此自然JSX/TSX 是 TypeScript 的原生语法扩展——React 的组合模型为什么天然适合 TypeScriptLSP 是什么：编辑器和语言的桥梁Language Server Protocol 如何把语言能力和编辑器解耦——为什么 TS7 支持 LSP 后，所有编辑器都能享受速度提升TypeScript 7：Go 重写与实现的分离TS7 用 Go 全面重写编译器，但你的代码一行不用改——从这个事实出发，理解实现与抽象的分离让动态世界拥有确定性（三）：Vue Vapor 如何用编译换运行时Template Analysis、Compiler Optimization 与 Direct DOM Operations 如何协作，让大量静态结构和细粒度更新绕过虚拟 DOM diff让动态世界拥有确定性（二）：React 如何让 UI 更新变得可调度setState、Fiber Tree、Lanes Priority、Scheduler 与 Concurrent Rendering 如何协作，让一次状态更新从同步阻塞变成可暂停、恢复、抢占的任务让动态世界拥有确定性（一）：V8 如何把动态代码跑出静态速度Hidden Class、Inline Cache 与 TurboFan 如何协作，让 obj.name 从属性查找变成接近内存偏移访问React 19 并发全景：从用户点击到 UI 更新的完整链路Transition、Suspense、useOptimistic、useFormStatus、useActionState——不是五个独立 API，而是一条完整链路的五个阶段RSC 设计哲学：React 如何跨越两台计算机从 'use client' 是什么到 Progressive JSON——Dan Abramov 2024-2025 年 RSC 系列核心思想提炼Vue 响应式原理完全指南：从 defineProperty 到 Alien Signals基于 vuejs/core reactivity 包全部 11 个源码文件，彻底拆解 Vue 响应式系统每一层实现——ReactiveFlags、懒代理、数组 hack、collectionHandlers、RefImpl、双向链表、版本计数、computed 双重身份、watch/watchEffect 万物皆 effect、effectScope 生命周期管理React vs Vue 3 架构全景：从浏览器渲染管线到框架设计哲学两个框架面对同一个浏览器，给出了完全不同的答案——搞清楚'为什么'比'是什么'重要DGX Spark reboot 后黑屏无法进入桌面 — 完整踩坑记录apt upgrade 导致内核和 NVIDIA 驱动模块版本不匹配，从黑屏到修复的全过程React 不是框架，是 UI Runtime：从 Fiber 到调度器的完整心智模型从 beginWork / completeWork 到 Lane 模型，从 bailout 机制到 useEffect 的真正含义——搞懂这些，React 的 API 就不重要了Apple Doesn't Use a Capsule for the Battery Icon Cap从 Apple 官方 Sketch 设计文件出发，拆解电池图标的每一个像素级细节React Effect：为什么副作用必须脱离 Render从忘掉生命周期到理解 Effect 的真正含义——探索 React 如何通过纯 Render 与 Effect 阶段保证 UI 更新的确定性浏览器渲染管线：从导航到合成层的完整流程导航、解析、渲染、回流重绘、合成层、事件循环，以及与 React 的关系Vite 8 完全指南：从原理到架构，毕业级开发服务器、HMR、Plugin 系统、Environment API、SSR、Rolldown、生产构建——12 章全覆盖