Vue 的源碼主要分為以下幾個部分：
主要涉及 響應式、虛擬 DOM、組件系統、編譯器、運行時。
├── packages/
│ ├── compiler-core/ # 編譯器核心
│ ├── compiler-sfc/ # 處理 .vue 單文件組件
│ ├── compiler-dom/ # 處理 DOM 相關的編譯邏輯
│ ├── reactivity/ # 響應式系統
│ ├── runtime-core/ # 運行時核心
│ ├── runtime-dom/ # 運行時 DOM 相關
│ ├── shared/ # 共享工具函數
│ ├── vue/ # Vue 入口
│ └── ...
React 源碼結構:
整體架構可以分為 調度（Scheduler）、協調（Reconciler）、渲染（Renderer） 三個核心部分
可以從 React 入口、Fiber 架構、調度機制、Hooks 實現、Diff 算法 等方面解析其核心原理。
├── packages/
│ ├── react/ # React 核心 API（React.createElement、hooks）
│ ├── react-dom/ # 負責渲染到 DOM
│ ├── scheduler/ # 調度器，控制任務優先級
│ ├── react-reconciler/ # 負責 Fiber 樹的協調和 Diff
│ ├── shared/ # 公共方法
│ ├── jest/ # 測試相關
│ └── ...
?Fiber 是 React 16 引入的核心數據結構，每個組件對應一個 Fiber 節點：
function FiberNode(tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode,
) {// 實例相關this.tag = tag; // 組件類型(Function/Class/Host等)this.key = key; // key屬性this.elementType = null; // 創建元素的類型this.type = null; // 組件函數/類this.stateNode = null; // 對應的真實DOM實例/類組件實例// Fiber樹結構this.return = null; // 父Fiberthis.child = null; // 第一個子Fiberthis.sibling = null; // 兄弟Fiberthis.index = 0; // 在兄弟中的索引// 狀態相關this.pendingProps = pendingProps;this.memoizedProps = null;this.updateQueue = null; // 狀態更新隊列this.memoizedState = null;// 當前狀態// 副作用this.effectTag = NoEffect;this.nextEffect = null; // 下一個有副作用的Fiber// 雙緩存技術this.alternate = null; // 連接current和workInProgress樹
}
)
