haoxiugong

摘要： 一、为什么 React 需要 Diff 算法 早期前端如果直接操作 DOM： div.innerHTML = newHTML 问题： DOM 操作极其昂贵 无法知道哪些节点真的变化 频繁重绘 如果使用​传统树 diff 算法​： 复杂度：O(n^3) 浏览器根本无法接受。 因此 React 提出 对 阅读全文

摘要： 一、位运算基础 1.1 二进制本质 JS 的 Number 在做位运算时：会转为 32 位有符号整数。 例如： 1 = 00000001 2 = 00000010 4 = 00000100 8 = 00001000 1.2 核心运算 （1）按位或 | —— 合并状态 1 | 2 = 3 0001 0 阅读全文

摘要： Scheduler = 最小堆 + MessageChannel + 时间片检查 它的目标只有一个：推进任务，但永远别饿死浏览器。 调度普通任务 React 19 最新 Scheduler 源码（packages/scheduler） 中，普通任务（非 Immediate，同步优先级之外的任务）的完 阅读全文

摘要： 先说结论，React 选择 MessageChannel 完成事件调度，是因为它： 属于宏任务（不会饿死浏览器：JavaScript 一直占着主线程，导致浏览器一直没有机会去做它必须做的事（渲染、响应输入、布局、绘制）） 延迟极低（接近微任务，但不会阻塞渲染） 相较于 rAF 不绑定渲染帧 可控、可 阅读全文

摘要： 一、React 渲染架构 底层渲染流程大致可以分为两大阶段：render 阶段（Scheduler -> Reconciler）、commit 阶段（Renderer） 注意这里的 render 阶段和 Renderer 渲染器是两个东西！！！ 主要的阶段可以总结为两个公式： const state 阅读全文

摘要： 这篇文章主要概括性的讲一下 React 架构演进历史，细节部分在之后的系列文章中都会详细讲到。 1. React 核心架构 React 核心（核心算法、调度、Hooks 等） ↓ Reconciler（协调器） ↓ Renderer（不同平台的渲染器，比如 ReactDOM / React Nati 阅读全文

摘要： 一、Canvas 是什么？ Canvas 是高性能渲染引擎。 <canvas> 是一个位图渲染容器 所有内容都通过 JS API 绘制 绘制完成后，浏览器只认识「像素」，不再关心你画了什么 canvans 支持绘制的图形，总结起来有四种： 直线（矩形） 曲线（圆形） 文字 图片 这与 DOM（结构化 阅读全文

摘要： 一、Pinia 概览 Pinia 本质是：「基于 Vue3 响应式系统 + effectScope 的“全局可控副作用容器”」 Pinia 核心代码集中在： packages/pinia/src/ ├── createPinia.ts ├── rootStore.ts ├── store.ts ├─ 阅读全文

摘要： 一、keep-alive 概述 keep-alive​ 不是缓存 DOM，而是缓存「组件 VNode + 组件实例（但 VNode 里持有组件实例）」，它通过“劫持组件卸载流程”，把 destroy 变成 deactivate 源码位置： packages/runtime-core/src/comp 阅读全文

摘要： 调度本义是指控制一系列任务的执行顺序/编排规划。Vue3 的调度系统使其能够做到“批量更新、不重复渲染、任务执行顺序可控” 。 Vue 的调度系统 = 副作用执行顺序 + 去重 + 批量刷新 所有响应式变化，最终都不会“立刻执行”，而是被“调度” 一、Vue 为什么需要调度系统？ 如果没有调度，会发 阅读全文