Skip to main content

Core Architecture

React Virtual DOM​

  • Reduce rendering times with reconciliation algorithm, improving rendering efficiency: Declarative UI performance = Diff performance + DOM performance, Virtual DOM 主要是为了最小化 Diff 性能消耗.
  • Cross platform code.
  • Functional programming without details on DOM manipulation.
  • Virtual DOM 很多时候都不是最优的操作, 但它具有普适性, 在效率与可维护性之间达到平衡.
  • SnabbDOM: virtual DOM library focus on modularity and performance.

React Core Packages​

  • Scheduler 调度器: 调度任务的优先级, 高优任务优先进入 Reconciler.
  • Reconciler 协调器:
    • 装载 Renderer.
    • 接收 ReactDOM 和 React 模块 (用户代码) 发起的更新请求:
      • ReactFiberReconciler.updateContainer.
      • ReactFiberClassComponent.setState.
      • ReactFiberHooks.dispatchAction.
    • 找出变化组件, 构建 Fiber Tree.
  • Renderer 渲染器:
    • 引导 React 应用启动 (e.g. ReactDOM.createRoot(rootNode).render(<App />)).
    • 实现 HostConfig 协议, 将变化的组件渲染到页面上.

其中 Reconciler 构建 Fiber Tree 的过程被包装成一个回调函数, 传入 Scheduler 模块等待调度. Scheduler 将回调函数进一步包装成任务对象, 放入多优先级调度的任务队列, 循环消费任务队列, 直至队列清空. Scheduler Work Loop (任务调度循环) 负责调度 Task, Reconciler Work Loop (Fiber 构造循环) 负责实现 Task.

React runtime main logic:

  • Updates: Add/Delete/Mutation updates from User Code.
  • Registration:
    • Reconciler receive updates request from User Code.
    • Scheduler register new Task.
  • Execution:
    • Scheduler consume Task in TaskQueue in work loop.
    • Reconciler execute Task work.
      • Fiber 构造循环: construct Fiber tree.
      • commitRoot: render Fiber tree with Renderer.
  • 任务调度循环与 Fiber 构造循环相互配合可实现可中断渲染:
    • 渲染中断 (Reconciler.renderRootConcurrent().shouldYield()):
      • 存在更高优先级任务 (Priority Scheduling).
      • 当前帧没有剩余时间 (Time Slicing).
    • 渲染恢复 (Scheduler.workLoop()): 将 callback() 返回的任务放入任务队列, 继续进行调度直至清空任务队列.

React Core Packages

React Core Workflow​

React Core Workflow

Create RootContainer​

Legacy Root​

Concurrent Root​

Update RootContainer​

// Legacy Mode
import type { ReactElement } from 'react'
import type { Container } from './types'
import Reconciler from './reconciler'

const Renderer = {
  render: (
    element: ReactElement,
    container: Container | null,
    callback?: Function
  ): void => {
    if (container) {
      const root = Reconciler.createContainer(container, 0, false, null)
      Reconciler.updateContainer(element, root, null)
    }
  },
}

export default Renderer
// Modern Mode
import type { ReactElement } from 'react'
import type { Container, OpaqueRoot } from './types'
import Reconciler from './reconciler'

const Renderer = {
  createRoot: (
    container: Container | null,
    callback?: Function
  ): OpaqueRoot => {
    if (container) {
      const root = Reconciler.createContainer(container, 0, false, null)

      root.render = function (element: ReactElement) {
        Reconciler.updateContainer(element, this, null)
      }

      return root
    }
  },
}

export default Renderer

ReactComponent SetState​

ClassComponent Update​

FunctionComponent Update​