haoxiugong

摘要： 这篇文章主要概括性的讲一下 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 为什么需要调度系统？ 如果没有调度，会发 阅读全文

摘要： 编译器是什么意思呢？和我们之前讲过的响应式系统有什么关联呢？ 编译器只会生成“访问响应式数据的代码”，执行收集依赖在运行时。 编译 .vue 文件 -> render -> 访问 _ctx.count -> proxy.set -> track 而本文我们着重讲讲编译这个过程。 一、Vue 编译器整 阅读全文

摘要： 学过上一节 ref、reactive、effect 后，接下来我们探究响应式变量的使用——computed 和 watch 。 一、computed 和 watch 概述 所有响应式逻辑都会依赖 effect 执行，computed / watch / render 本质都是 effect。 eff 阅读全文

摘要： 一、Vue3 响应式系统概述 Vue3 响应式包 @vue/reactivity，核心由三部分构成： 数据 (Proxy Object) —— 依赖收集 Track —— 触发更新 Trigger —— Effect 执行更新 核心目标： 拦截读取和设置操作 收集依赖 在数据变化时重新触发相关副作用 阅读全文

摘要： 整体流程 完整的创建与渲染流程可以分成这些阶段： 创建 App 实例 创建根组件实例 设置响应式状态 创建渲染器（Renderer） 挂载 Mount vnode -> DOM 渲染 数据变更触发更新 重新渲染 / diff / patch 流程图大致如下： createApp() ───> app 阅读全文

摘要： Fiber 的核心目标——把一次“不可中断的递归渲染”，拆成“可中断、可恢复、可优先级调度的工作单元” 一、为什么 React 要引入 Fiber？ 老架构（Stack Reconciler）的问题，React 16 之前： diff + render 是一次性同步递归 JS 线程被长期占用 浏览器 阅读全文