一、React 15（2016）

• 核心架構：Stack Reconciler（棧協調器）

• 工作原理：

  • 同步遞歸渲染：采用深度優先遍歷方式遞歸處理 Virtual DOM，形成不可中斷的調用棧
  • 渲染流程：1. 觸發 setState → 2. 生成新 Virtual DOM → 3. Diff 算法對比差異 → 4. 同步更新真實 DOM

• 局限性：

  • 阻塞主線程：大型組件樹更新會導致界面卡頓（超過 16ms 的幀時間）

  • 無法實現優先級調度：所有更新同等對待，緊急交互無法插隊

  • 錯誤處理薄弱：組件樹中任意錯誤會導致整個應用崩潰

• 擴展：

  • 優先等級
    - 同步執行，如輸入框的輸入事件
    - 需要快速響應的事件（點擊，懸停）
    - 普通狀態更新（setState）
    - 數據預加載，非緊急渲染
    - 可延遲到瀏覽器空閑時間段的任務

  • 調度的原理

    • 時間切片
      • 將長任務拆分成多個5ms左右的小單元任務，通過reauestIdleCallback或者 schdeuler在瀏覽器空閑時間執行
    • 可中斷與恢復
      • Fiber 架構 允許保存當前的任務狀態，高優先級任務可中斷當前低優先級任務，優先執行后自動回復

  • 優先級標記方式

    • 手動標記： 通過API明確優先級，startTransition
    • 自動推算： react 會根據事件類型進行推算 onClick，onMouseMove，onLoad等等

  • Virtual DOM 的本質與作用

    • 什么是Virtual DOM

      • 定義： 一個輕量化的js 對象，描述真實的DOM的結構和屬性

      • 結構示例：

        const vdom = {type: 'div',props: {className: 'container',children: [{ type: 'h1', props: { children: 'Hello World' } },{ type: 'p', props: { children: 'Content...' } }]}
        };
        

    • 核心作用

      • 性能優化：通過 Diff 算法 計算新舊 Virtual DOM 差異，最小化真實 DOM 操作
        

      • 跨平臺能力：Virtual DOM 抽象了平臺差異，同一邏輯可渲染到 Web、Native（React Native）、Canvas 等

    • diff算法策略
      • 同級比較：僅對比同層級的節點，不跨層級比較（時間復雜度從 O(n3) 優化到 O(n)）。
      • Key值優化：列表通過key值，減少不必要的節點銷毀/重建
      • 組件類型判斷： 如果組件類型不同，直接替換整個子樹

  • Virtual DOM 與協調器的協作流程

    • 觸發更新：組件變化將觸發協調器流程
    • 構建Fiber樹： 協調器將vmdom 轉為fiber節點鏈表，每個節點包含優先級標記
    • 協調調度：根據
    • 提交階段：完成所有fiber節點處理后，將變更批量提交到真實的dom
      

react15的特性先到這里，react16-17-18 在下一篇文章詳細講解，敬請期待吧～