Skip to content

消息城和报童小铃一起造一个信号库

一本写给 10 岁孩子的 TypeScript 教程书。从零开始,一步步建造出真正的 alien-signals 信号库,最后跑绿它的全部测试。

这本书要做什么

你听说过"信号"吗?它不是手机信号,而是一种会变化的消息

想象一个新闻社:报纸一改,所有订报的人都会自动收到新报纸——不用他们一个个来问"改了吗?改了吗?"。信号库就是给程序装上这套"自动送报"的本事。

在接下来的 21 章里,你会跟着报童小铃,从零开始亲手建造一个真正的信号库——就是世界上那个最快的、已经被 Vue 用到自己身体里的信号库。你会先建一个"能跑但有点笨"的版本,再给它动一次"心脏手术",然后一步一步优化,直到它和真实库一样快、一样聪明。

每一章结尾都有完整的代码,抄下来就能跑;还有动手试试的小练习,答案就藏在章节末尾,先自己想想再看。

全书路线图(21 章)

第一部分 · 朴素版(第 1-6 章)

用最直白的思路(集合 Set + 递归)先造一个能跑的信号库,建立直觉。

  • 第 1 章 消息城:什么是信号,为什么"一变全变"(✓)
  • 第 2 章 工作台:TypeScript 环境 + vitest,第一条会跑的测试(✓)
  • 第 3 章 第一个信号:signal + effect,用集合记订阅者(✓)
  • 第 4 章 计算值:computed,依赖追踪 + 缓存(✓)
  • 第 5 章 攒批:startBatch / endBatch 朴素版(✓)
  • 第 6 章 朴素版的烦恼:顺序不稳、重复通知——引出链表(✓)

第二部分 · 心脏手术(第 7-10 章)

把"集合记订阅者"换成真正的"连接线"链表,算法开始脱胎换骨。

  • 第 7 章 连接线 Link:双向链表替换集合(✓)
  • 第 8 章 传播 propagate:递归版 + 过期/待核实标志(✓)
  • 第 9 章 核实 checkDirty:递归版 + 惰性计算(✓)
  • 第 10 章 回归:链表版跑通全部旧测试(✓)

第三部分 · 优化之路(第 11-21 章)

一步步走向真实库的最终算法,最后跑绿它的全部测试。

  • 第 11 章 显式栈:把递归换成迭代(✓)
  • 第 12 章 迭代版核实(浅传播已提前到第 9 章)(✓)
  • 第 13 章 防重复传播:Recursed / RecursedCheck(✓)
  • 第 14 章 期号 version:连接线复用(✓)
  • 第 15 章 自动反应的一生:清理、嵌套、LIFO 顺序(✓)
  • 第 16 章 effectScope:订阅小组(✓)
  • 第 17 章 trigger:手动发刊(✓)
  • 第 18 章 正式攒批:批量精修(✓)
  • 第 19 章 untracked 与递归自动反应(✓)
  • 第 20 章 createReactiveSystem:引擎与整车分离(✓)
  • 第 21 章 毕业:跑绿参考库全部测试 + 和朴素版比速度(✓)
  • 第 22 章 性能彩蛋:和原版当面比一比(✓)

附录

📌 参考库是真实的 alien-signals(版本 3.2.1),放在仓库的 参考/ 文件夹里。书里的代码最终会和它完全一致。