React 渲染流程深度解析（结合 react-reconciler）

最新推荐文章于 2025-10-15 14:48:58 发布

原创

最新推荐文章于 2025-10-15 14:48:58 发布 · 377 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

React 的完整渲染流程是一个精心设计的协调过程，涉及 react 和 react-reconciler 两个核心包的紧密协作。让我们深入解析整个渲染流程：

整体架构分层

┌──────────────────────┐
│      react-dom       │  ← 平台特定渲染器
├──────────────────────┤
│   react-reconciler   │  ← 协调器核心（Fiber架构）
├──────────────────────┤
│       react          │  ← 公共API层（ReactElement/Hooks）
└──────────────────────┘

完整渲染流程解析

1. 初始化阶段（react 包）

// 用户代码
import {
   
    createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

createRoot() 创建根节点，初始化渲染器
render() 触发首次渲染

2. 创建 Fiber 根节点（react-reconciler）

// ReactDOMRoot.js
function createRoot(container) {
   
   
  return new ReactDOMRoot(container);
}

class ReactDOMRoot {
   
   
  constructor(container) {
   
   
    this._internalRoot = createFiberRoot(container);
  }
  
  render(element) {
   
   
    updateContainer(element, this._internalRoot);
  }
}

3. 协调过程（核心）

3.1 创建更新对象

// ReactFiberReconciler.js
function updateContainer(element, container) {
   
   
  const update = createUpdate();
  update.payload = {
   
    element };
  enqueueUpdate(container.current, update);
  scheduleUpdateOnFiber(container.current