mcpField
R
reference-core

reference-core

github.com/angular开发101.1k987 次安装今天更新
代码仓库

关于 reference-core

面向 Angular 开发者的参考技能，介绍 `packages/core` 的运行时架构。内容涵盖渲染、依赖注入、变更检测和响应式机制，并说明核心代码的修改思路。

主要功能

  1. 01Ivy 指令式渲染
  2. 02LView 与 TView 内存模型
  3. 03分层依赖注入
  4. 04变更检测与 Signals
  5. 05核心代码与测试指引

适用场景

  1. 01追踪模板如何更新 DOM
  2. 02理解注入器的解析过程
  3. 03评估对 LView 或 TView 的修改
  4. 04查找核心实现与测试

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/angular/angular --skill reference-core

安装后在 Claude Code 中输入/reference-core确认已加载。

详细介绍

Angular 核心（packages/core）心智模型

本文概述了 packages/core 的架构和心智模型。packages/core 是 Angular 框架的核心。

1. 高层架构

packages/core 包含 Angular 的运行时逻辑。其主要职责包括：

  1. 渲染（Ivy/Render3）：将模板转换为 DOM 更新。
  2. 依赖注入（DI）：管理对象的创建和生命周期。
  3. 变更检测：让模型与视图保持同步。
  4. 响应式：Signals 与 Zone.js 集成。

2. 渲染引擎（Ivy / Render3）

渲染引擎（位于 packages/core/src/render3）采用基于指令的方式。

关键概念

  • 指令：Angular 编译器会将模板转换为一系列指令调用（例如 ɵɵelementStart、ɵɵtext、ɵɵproperty）。这些指令在运行时执行，用于创建和更新视图。

    • 位置：packages/core/src/render3/instructions

  • LView（逻辑视图）：一个数组，其中包含特定视图实例的_状态_。它包含：

    • DOM 节点（RElement、RText）。
    • 绑定值（用于变更检测）。
    • 指令/组件实例。
    • 上下文：packages/core/src/render3/interfaces/view.ts

  • TView（模板视图）：描述视图_静态结构_的对象；其对应数组为 TView.data。同一组件/模板的所有实例（LView）共享该对象。它包含：

    • 绑定的属性名。
    • 节点关系信息。
    • 编译后的指令定义。
    • 上下文：packages/core/src/render3/interfaces/view.ts

  • 内存布局：LView 和 TView.data 是并行数组。LView 中索引 i 处的内容对应 TView.data 中索引 i 处的元数据。

    • HEADER：固定大小，包含上下文（父级、宿主等）。
    • DECLS：静态节点（元素、文本、管道）。
    • VARS：绑定值。
    • EXPANDO：动态数据（宿主绑定、注入器）。
渲染周期
  1. 创建模式：指令创建 DOM 节点，并将其存储在 LView 中。
  2. 更新模式：指令会将当前值与存储在 LView 中的旧值进行比较。如果值发生变化，就会更新 DOM。

3. 依赖注入（DI）

Angular 中的 DI 具有层级结构，并分为两个相互协作的系统：

模块注入器（R3Injector）
  • 通过 @NgModule.providers 或 providedIn: 'root' 配置。
  • 存储在由多个 R3Injector 实例构成的层级结构中。
  • 位置：packages/core/src/di/r3_injector.ts
节点注入器
  • 通过 @Component.providers 或 @Directive.providers 配置。
  • 不是类，而是嵌入在 LView（“Expando”部分）中的数据结构。
  • 使用 布隆过滤器（TView.data），在沿树向上遍历之前，快速检查特定节点索引处是否存在某个令牌。
  • 从当前节点开始解析令牌，沿视图树向上遍历（元素注入器层级）；如果未找到，则回退到模块注入器。

4. 变更检测

  • 脏检查：Angular 会检查模板中绑定的值是否发生变化。
  • 策略：
    • OnPush：默认策略。当输入发生变化、事件触发、模板 Signals 更新，或视图被显式标记为需要检查时进行检查。
    • Eager：每当变更检测遍历到该组件时，就会进行检查。（Default 是已弃用的 Eager 别名。）
  • Signals：新型响应式原语。Signals 发生变化时会通知调度器，从而有可能实现细粒度更新（无 Zone）。

5. 需要了解的关键目录

  • src/render3：Ivy 渲染引擎。
    • instructions：由编译代码调用的运行时指令。
    • interfaces：LView、TView、TNode 定义。
  • src/di：依赖注入系统。
  • src/change_detection：变更检测逻辑。
  • src/zone：Zone.js 集成。
  • src/render3/reactivity：Signals 实现（signal、computed、effect），基于 primitives/signals 中的响应式图。

6. 约定与注意事项

  • 前缀：私有/内部导出项通常以 ɵ 开头。
  • 全局状态：Ivy 在执行指令期间大量依赖全局状态（例如 getLView()），以避免在各处传递上下文参数。这是为了提升性能并减小代码体积。
  • 性能：代码针对性能和内存进行了高度优化。你会看到代码使用数组而非对象、位掩码以及手动内存管理模式。请遵循这些模式。

7. 如何修改核心代码

  1. 理解指令：如果要修改运行时行为，请在 src/render3/instructions 中找到对应的指令。
  2. 检查 LView/TView 的影响：如果要添加状态，请了解它在 LView 数组中的位置。
  3. 测试：核心代码有大量测试。使用 Bazel 运行这些测试。

评论

支持 Markdown