React 18 追踪:Offscreen 从 Suspense 拆出,兼系列四个月回顾
OffscreenComponent 的渲染与提交逻辑、可见性切换时 layout effect 的卸载与重挂、四个关键 commit 的演进线,以及系列四个月的回顾。
共 76 篇文章
OffscreenComponent 的渲染与提交逻辑、可见性切换时 layout effect 的卸载与重挂、四个关键 commit 的演进线,以及系列四个月的回顾。
8 月 28 日到 9 月 21 日,master 上完成了 useSyncExternalStore 对 useMutableSource 的替换,中间还有一次删除后第二天加回的反复,这篇按 commit 顺序讲清过程和背后的 tearing 问题。
9 月 14 日合入的 useInsertionEffect 在 commit 阶段的执行位置与 CSS-in-JS 场景,以及 react-server-dom-webpack 里 Flight(Server Components)协议的当前完成度。
选择性注水的完整链路:点击落在未注水的 Suspense 边界上时,事件如何被挂起入队、边界如何被提升到高优先级 lane 抢先注水,以及提交后队列如何按序重放。
Fizz 的数据结构与工作流程:Request、Task、Segment、SuspenseBoundary 四类对象,挂起后如何分段补发,以及与 ReactPartialRenderer 旧实现的对比。
一次 click 如何经事件优先级决定更新的 lane,以及 Provider 变更如何沿 dependencies 链表与 childLanes 冒泡送到每个 consumer。
useOpaqueIdentifier 在服务器和客户端各自的发号方式,以及 hydration 时用不透明对象延迟物化 id、绕开两端计数器对不上问题的完整设计。
startTransition、useTransition、useDeferredValue 三个用户 API 在源码里的实现形态,以及它们如何通过 ReactCurrentBatchConfig 接到 Lane 模型上。
组件 throw 出 thenable 之后的完整链路:throwException 捕获边界、pingCache 与 retryCache 两层去重、挂起 lane 的节流提交、ping 之后的 RetryLane 重试。
setTimeout 里连续两次 setState 在 17 渲染两次、在 18 alpha 的 createRoot 下只渲染一次,这篇从源码核实这个差异在当时的代码里如何成立,以及渲染进行中收到更新时交错更新队列的入队与转移。
7 月第一周 master 上围绕 flushSync 的一合一滚:unbatchedUpdates 和 flushDiscreteUpdates 被并进 flushSync,六天后又整体回滚,这篇把重构前后两个形态拆开看。
createRoot 转正的三个 commit、RootTag 从三种收编成两种的过程,以及换了入口之后首挂载、批处理、回调参数这些具体行为差在哪。
ensureRootIsScheduled 如何在 Sync 与 Concurrent 两条路径间做选择,Scheduler 的 5ms 时间切片、MessageChannel 调度与任务续体机制,收束 Fiber 与 Lane 三篇。
接上篇读 ReactFiberLane.new.js:getNextLanes 的分支决策、computeExpirationTime 的过期时间数值、transition lane 的轮转分配。
Lane 模型的静态结构:31 个二进制位的分组、getHighestPriorityLane 等位运算函数,以及 expirationTime 单值模型被放弃的原因。
系列开篇。递归的 Stack Reconciler 为什么撑不起可中断渲染,Fiber 的字段分组、双缓冲与 .new/.old 双 fork 的现状。
60 篇的收官篇:不可变文档与显式映射的更新模型、核心薄扩展厚的边界、插件系统的能力分层,每个设计论断都指回具体篇目,附全系列地图与完整索引。
从文档模型、更新模型、合法性校验、扩展机制四层对比 ProseMirror 与 Draft.js、Slate、Quill 的结构差异,ProseMirror 侧逐条对应本系列前 58 篇拆过的机制。
meta 仓库 bin/pm.js 的命令面、buildhelper 的构建测试约定,以及 changelog 驱动的 release 管线如何统一管理 20 个仓库的版本与依赖。
prosemirror-test-builder 的两个源文件:block/mark builder 的生成与默认 attrs、字符串里 标签的位置记账、flatten 的嵌套 tag 平移,以及它在 prosemirror-transform 测试里同时充当操作参数和映射断言锚点的用法。
prosemirror-example-setup 的装配逻辑:七个插件按固定顺序拼装,顺序决定按键与输入的分发优先级,三个 build 函数按 schema 按需生成绑定,以及它离生产级编辑器差什么。
prosemirror-tables 的 columnresizing 插件与 TableView:widget 装饰生成拖拽手柄,mousemove/mousedown 的事件链,拖拽期间只改 DOM 的实时反馈,松手时 colwidth attr 一次写回,以及 handleWidth 等配置与插件拼装顺序。
prosemirror-tables 的命令层:selectedRect 把选区翻译成 TableRect,addColumn/addRow 在格网定位后改 span 或插新格,mergeCells/splitCell 重算 span 与 colwidth,goToNextCell 按文档顺序导航。
prosemirror-tables 的 CellSelection:用 anchorCell/headCell 两个位置表达矩形选区,isRowSelection/isColSelection 的判定与扩展,选区可视化的装饰方案,以及跨表格时的边界处理。
prosemirror-tables 的地基:tableNodes 工厂生成的四个节点 spec、colspan/rowspan/colwidth 三个 attr,TableMap 的扁平格网与 problems 诊断,以及 findTable、cellAround 等定位函数。
prosemirror-search 的两个文件:SearchQuery 的文本块扫描与正则匹配、range 随文档变化的 Mapping 维护、getReplacements 的 skip/copy 区间,以及命令与装饰的组合。
prosemirror-markdown 的双向转换机制:MarkdownSerializer 的渲染表与状态机,markdown-it token 流接入 MarkdownParseState 的栈,以及与 DOM 通路的对照。
prosemirror-changeset 的 span 表示:Change 的 A/B 双坐标、Change.merge 在中间坐标系上的归并、addSteps 之后用 Myers diff 最小化,以及 simplifyChanges 的按词化简。
prosemirror-collab 的 API 面与使用方分工:unconfirmed 的三类变动、history 在 rebase 后的 Branch.rebased 重建、preserveItems 的两处作用,以及官网 demo 里收发循环的完整时序。
prosemirror-collab 的集中式权威模型:version 与 unconfirmed 两个字段怎么记账,远端 step 到达时本地未确认 step 如何经 rebaseSteps 撤销、追赶、映射重做。
prosemirror-menu 的 MenuElement 协议、MenuItem 的 run/select/enable/active 四件套、Dropdown 组合、menubar 插件的 floating 模式,以及这套 UI 层为什么留在核心之外。
dropcursor 在 dragover 事件里算出落点,用一个绝对定位的 div 画指示线;块级位置画横线、行内位置画竖线,内部拖拽经过 dropPoint 的 schema 校验。
两个块级 节点之间的文档位置没有文本容器,TextSelection 与 NodeSelection 都落不进去;gapcursor 用一种选区类型加一个 widget 假光标补上这类缝隙。
prosemirror-schema-list 全文件解读:list_item 内容表达式的设计,wrapInList、splitListItem、liftListItem、sinkListItem 四条命令的逐步推导,以及列表为什么是全库边界情况最密集的代码。
prosemirror-schema-basic 全文件解读:九个节点与四个 mark 的 spec 逐一定义,marks 排除规则的三层实例,以及列表节点为什么留给 schema-list。
prosemirror-inputrules 全文件解读:InputRule 的 match 与 handler、正则 $ 结尾匹配的语义,handleTextInput 挂载点,wrappingInputRule 与 textblockTypeInputRule 两个构造器,以及 undoInputRule 怎么把规则效果和输入文本分开撤销。