React 挂载阶段 HostComponent 创建流程

好，把咖啡放下，把手机静音，我们直接切入正题。今天我们不聊 Hooks 的坑，不聊 Redux 的泥潭，我们要聊聊 React 挂载阶段最核心、最硬核，也最容易被大家忽略的一块肉——HostComponent 的创建流程。

很多自诩“React 进阶”的同学，可能只知道 ReactDOM.createRoot 和 render，然后 React 就“嗖”地一下把页面画出来了。但你有没有想过，这个“嗖”的一下，到底发生了什么？那个 <div> 到底是从哪冒出来的？那个 span 到底是怎么插进来的？React 是个库，它不直接操作 DOM，那它到底怎么指挥浏览器干活？

别急，今天我就带你钻进 React 的源码深处，看看这个“挂载”过程到底是一场精心编排的魔术，还是一场混乱的工地大乱斗。

第一幕：架构师的梦魇与 Fiber 的诞生

首先，我们要搞清楚一个前提。React 16 之前，那叫“递归渲染”。就像一个不懂变通的强迫症工程师，他拿着你的 JSX，一条路走到黑，递归到底，中间要是卡住了，整个页面就卡死了。用户体验？不存在的，浏览器会直接给你个白屏。

所以，React 16 引入了 Fiber 架构。Fiber 不是线程，它是一个数据结构，一个巨大的对象列表。你可以把 React 的渲染过程想象成一家建筑公司。

• 调度器：那个坐在办公室里看报表的老板。他手里有个任务列表，他决定什么时候干活，干多少活。
• 协调器：那个在工地上跑来跑去的工头。他负责根据老板的指令，把 JSX 转换成 Fiber 节点，然后把这些节点连成树。
• 渲染器：那个真正拿着铲子、电钻和油漆桶的工人。他负责把协调器造好的 Fiber 节点，翻译成浏览器能懂的 HTML（DOM）。

我们今天要聊的 HostComponent，就是渲染器手里的那个“电钻”。当协调器递归的时候，遇到了一个 <div> 标签，它就会大喊一声：“嘿！渲染器！这有个 HostComponent，给我造一个 DOM 节点出来！”

第二幕：入口点——renderRootIntoContainer

一切都要从 ReactDOM.createRoot 开始。这就像你给建筑公司下了个订单。

// 简化版的 ReactDOM.render 逻辑
function renderRootIntoContainer(container, element) {
  // 1. 创建一个 RootFiber，这是整个树的根
  var root = container._rootContainer || createFiberRoot(container);

  // 2. 把 JSX 元素包装成一个 Fiber 节点
  var nextChildren = element;

  // 3. 开始渲染！
  updateContainer(nextChildren, root, null, callback);
}

这个 updateContainer 就是发令枪。它把 JSX 丢给协调器，协调器就开始干活了。

第三幕：协调器的狂欢——beginWork

协调器是怎么干的？它维护了两棵树：

1. Current Tree：这是浏览器里已经存在的 DOM 树，代表“现在”。
2. WorkInProgress Tree：这是正在构建中的 Fiber 树，代表“未来”。

协调器会根据 JSX 的结构，在 WorkInProgress 树里创建对应的 Fiber 节点。这个过程的核心函数是 beginWork。

你可以把 beginWork 想象成一个递归的侦探。他拿着一份嫌疑人的名单（JSX），开始一个个排查。

// ReactFiberBeginWork.js 的核心逻辑（伪代码）
function beginWork(current, workInProgress, renderLanes) {
  var tag = workInProgress.tag;

  // 如果是 HostComponent（比如 <div>）
  if (tag === HostComponent) {
    return updateHostComponent(current, workInProgress, renderLanes);
  }

  // 如果是 HostText（比如 "Hello World"）
  if (tag === HostText) {
    return updateHostText(current, workInProgress);
  }

  // ... 其他类型的处理
}

当 beginWork 遇到 <div> 时，它会调用 updateHostComponent。注意，如果是挂载阶段（初次渲染），这个函数内部会根据 current 是否存在，来决定是走 mount 流程还是 update 流程。

第四幕：HostComponent 的诞生——mountHostComponent

这是重头戏。我们来看看当协调器决定创建一个 DOM 节点时，到底发生了什么。

在 ReactFiberBeginWork.js 里，mountHostComponent 函数是主角。它的任务很简单：创建 DOM 实例。

function mountHostComponent(
  current,
  workInProgress,
  type, // 比如 'div'
  rootContainerInstance, // 挂载点，通常是 document.body
  hostContext, // 当前上下文
  _mountPhase,
  lanes,
) {
  // 1. 获取该节点所有的 props，比如 className, style, id
  var props = workInProgress.pendingProps;

  // 2. 创建 DOM 实例！这是最关键的一步
  // createInstance 会调用 document.createElement
  var instance = createInstance(
    type,
    props,
    rootContainerInstance,
    hostContext,
    _mountPhase,
    lanes,
  );

  // 3. 把创建好的 DOM 实例挂载到 workInProgress.stateNode 上
  // 这样协调器就知道，这个 Fiber 节点对应的真实 DOM 是谁了
  workInProgress.stateNode = instance;

  // 4. 把 DOM 插入到父节点中
  // updatePlacement 会计算它应该插在哪里，然后执行 appendChild 或 insertBefore
  // 注意：这里只是把节点挂载到了 WorkInProgress 树里，还没真正写入浏览器 DOM
  appendAllChildren(workInProgress, instance, false, false);

  // 5. 设置初始属性（className, style 等）
  finalizeInitialChildren(
    instance,
    type,
    props,
    rootContainerInstance,
  );

  return workInProgress;
}

4.1 召唤神龙：createInstance

createInstance 是渲染器层面的函数，定义在 ReactFiberHostConfig.js（或者 ReactDOMHostConfig）里。它是 React 和浏览器 DOM API 之间的桥梁。

// ReactFiberHostConfig.js (简化版)
export function createInstance(
  type, // 'div'
  props,
  rootContainerInstance, // document.body
  hostContext,
  _mountPhase,
  lanes,
) {
  // React 18+ 对浏览器 API 做了适配，比如自动添加 isCommentNode 标记等
  // 但核心动作就是这一行：
  return document.createElement(type);
}

看，就是这么简单粗暴。React 没有任何花哨的封装，它直接调用了浏览器的原生 API。这就是为什么 React 能这么快的原因——它本质上就是用 JavaScript 调用浏览器的原生方法。

4.2 插入位置：updatePlacement

创建完 div 之后，React 必须决定把它放在哪里。是放在 <div> 里面？还是放在 <div> 里面再放个 <span>？

这涉及到 DOM 树的结构。React 会在 Fiber 树中维护父子关系（return 指针和 child/sibling 指针）。

appendAllChildren 函数会递归地遍历当前 Fiber 节点的所有子节点，把它们都 append 到刚刚创建的 instance（也就是那个 div）里。

// 伪代码逻辑
function appendAllChildren(parent, workInProgress, isHidden, isHydrating) {
  var node = workInProgress.child;
  while (node !== null) {
    if (node.tag === HostComponent || node.tag === HostText) {
      // 如果是 DOM 节点或文本节点
      // 把 DOM 实例挂载到父实例上
      if (isHidden) {
        // 隐藏节点的处理逻辑
      } else {
        // 核心：appendChild！
        // 这一步把 DOM 节点真正插入到了 WorkInProgress 树的父节点里
        appendChild(parent.stateNode, node.stateNode);
      }
    } else if (node.tag === HostComponent) {
      // 如果是组件，继续递归
      appendAllChildren(parent, node, isHidden, isHydrating);
    }
    // ... 其他情况
    node = node.sibling;
  }
}

这里有个细节：appendChild 是同步的。它不会把 DOM 丢给浏览器异步去渲染，而是直接调用浏览器的方法，把节点挂载到父节点的末尾。

4.3 涂脂抹粉：finalizeInitialChildren

光有个空壳子 div 是不够的，它得有属性啊！className 是什么？style 是什么？id 是什么？

finalizeInitialChildren 负责干这个脏活累活。它会遍历 props，然后把它们设置到 DOM 节点上。

// ReactFiberHostConfig.js (简化版)
export function finalizeInitialChildren(
  domElement,
  type, // 'div'
  props,
  rootContainerInstance,
) {
  // 1. 设置属性
  setInitialDOMProperties(domElement, type, props, isCustomComponent(domElement, props));

  // 2. 设置监听器
  // React 会在 mount 时挂载所有的 onClick, onChange 等事件监听器
  return shouldSetTextContent(type, props);
}

这里涉及到一个很重要的概念：事件委托。React 不会给每个 div 都绑定一个 onclick 监听器（那样内存会爆炸），它只会给根节点绑定一个监听器。finalizeInitialChildren 里其实并没有直接绑定事件，而是在稍后的 commitMount 阶段，或者通过事件系统统一处理的。但这里会设置 on* 属性。

第五幕：文本节点的“卑微”宿命

在 JSX 里，除了组件和标签，还有文本。比如 <div>Hello</div>。

<div> 是 HostComponent，那 Hello 是什么？它是 HostText。

HostText 的挂载逻辑和 HostComponent 类似，但更简单粗暴。它不需要 createElement，它只需要 createTextNode。

// ReactFiberBeginWork.js
function mountHostTextComponent(current, workInProgress, textContent, lanes) {
  var node = createTextNode(textContent, workInProgress);
  workInProgress.stateNode = node;
  return workInProgress;
}

// ReactFiberHostConfig.js
export function createTextNode(textContent, workInProgress) {
  return document.createTextNode(textContent);
}

文本节点一旦创建，就会被 appendAllChildren 乖乖地塞进它的父节点里。

第六幕：Commit 阶段——真正的“硬广”时刻

等等，我刚才说 appendChild 是同步的？是不是有点误导？

其实，React 的设计是双缓冲。

1. Commit Before Mutation 阶段：在这个阶段，React 会遍历 WorkInProgress 树，执行那些需要改变 DOM 结构的操作（比如 appendChild, removeChild）。这一步是同步的。因为浏览器必须马上知道 DOM 结构变了，否则布局计算会出错。
2. Layout Effects 阶段：在这个阶段，React 会执行副作用，比如 useEffect，还有 ref 的回调。这一步也是同步的。
3. Commit Mutation 阶段：在这个阶段，React 会执行那些不需要阻塞布局的操作（比如 requestAnimationFrame，或者一些非关键视觉更新）。

对于初次挂载，commitRoot 函数是总指挥。

// ReactFiberCommitWork.js
function commitRoot(root) {
  var finishedWork = root.finishedWork;
  root.finishedWork = null;
  root.nextLanes = 0;

  // 1. 布局效果更新（处理 ref, useEffect）
  commitLayoutEffects(finishedWork, root);

  // 2. DOM 变更（处理 appendChild, removeChild）
  commitBeforeMutationEffects(finishedWork);

  // 3. 实际的 DOM 插入和更新
  commitMutationEffects(finishedWork, root);

  // 4. 清理
  // ...
}

在 commitMutationEffects 里，React 会遍历 Fiber 树，检查 flags（标记位）。

• 如果是 Placement 标记：调用 commitPlacement。
• 如果是 Update 标记：调用 commitUpdate。

6.1 commitPlacement：把 DOM 搬进家

commitPlacement 是一个比较复杂的函数，因为它需要处理 DOM 树的插入顺序。React 必须确保插入的顺序和 Fiber 树的遍历顺序一致。

// ReactFiberCommitWork.js
function commitPlacement(fiber) {
  // 1. 找到父节点
  var parentFiber = getHostParentFiber(fiber);

  // 2. 找到当前 DOM 节点
  var node = fiber.stateNode;

  // 3. 找到兄弟节点（用于决定 insertBefore 还是 appendChild）
  var nextSibling = getHostSiblingFiber(fiber);

  // 4. 执行插入操作
  if (nextSibling) {
    // 如果有兄弟节点，用 insertBefore 插入到兄弟节点之前
    insertBefore(parentFiber.stateNode, node, nextSibling);
  } else {
    // 如果没有兄弟节点（是最后一个子节点），用 appendChild 插入到末尾
    appendChild(parentFiber.stateNode, node);
  }
}

这里涉及到一个算法：Fiber 树的遍历顺序。
Fiber 树是深度优先遍历的。
比如：<div><span>1</span><span>2</span></div>。
遍历顺序是：div -> span(1) -> span(2)。
所以，span(2) 会 appendChild 到 div，span(1) 也会 appendChild 到 div。顺序是正确的。

但如果顺序变了，比如 div 里有 span，然后 span 里有 span。
div -> span(A) -> span(A1) -> span(A2) -> span(B) -> span(B1)。
React 会确保 DOM 节点也是按这个顺序插入的。

6.2 commitUpdate：换个新皮肤

挂载阶段主要是创建新节点。但如果这个节点之前已经存在（比如更新了），React 会走 commitUpdate。

commitUpdate 会根据 props 的变化，调用 DOMPropertyOperations.updateProperty。它会判断属性是新增、删除还是修改。

// ReactFiberCommitWork.js
function commitUpdate(domElement, updatePayload, tag, oldProps, newProps) {
  // 根据 updatePayload 更新 DOM 属性
  switch (tag) {
    case HostComponent:
      commitUpdateAttributes(domElement, updatePayload, oldProps, newProps);
      break;
    // ...
  }
}

第七幕：HostComponent 的“黑魔法”——Hydration（注水）

讲了这么多挂载，其实还有一个更高级的玩法，叫 Hydration（注水）。

Hydration 是 React 18 的杀手锏。它的意思是：我不重新创建 DOM，我直接利用浏览器里已经存在的 DOM！

比如，你刷新页面，浏览器里已经有了 <div id="root"><h1>Hello</h1></div>。React 不会去 document.createElement('div')，它直接拿着这个现成的 DOM 去和 Fiber 树匹配。

// ReactFiberBeginWork.js
function mountHostComponent(...) {
  // ...
  // 如果是 Hydration 模式
  var isHydrating = shouldHydrate(); 
  if (isHydrating) {
    // hydrateInstance 会检查 DOM 是否匹配 Fiber 的 type 和 props
    var instance = hydrateInstance(
      type,
      props,
      rootContainerInstance,
      hostContext,
      workInProgress,
    );
    workInProgress.stateNode = instance;
  } else {
    // 普通挂载模式，就是上面讲的 createInstance
    var instance = createInstance(...);
    workInProgress.stateNode = instance;
  }
}

Hydration 极大地提高了首屏渲染速度。因为它省去了创建 DOM 的开销，直接复用浏览器的 DOM 节点。

第八幕：总结与升华——这背后的逻辑

好了，我们把镜头拉远，看看整个 HostComponent 创建的流程图：

1. 调度：requestIdleCallback 告诉浏览器，“嘿，我有空了，干点活吧”。
2. 协调：beginWork 递归遍历 JSX，创建 Fiber 节点。遇到 <div>，标记为 HostComponent。
3. 创建：mountHostComponent 被调用。它调用 createInstance（即 document.createElement）创建 DOM 实例，并挂载到 workInProgress.stateNode。
4. 插入：appendAllChildren 递归地把子节点 append 到父节点里。
5. 属性：finalizeInitialChildren 设置初始属性。
6. 提交：commitRoot 触发。commitPlacement 把 DOM 真正插入到浏览器页面中。commitUpdate 更新属性。
7. 注水：如果开启了 Hydration，React 会直接复用浏览器现有的 DOM。

你可能会问，为什么这么复杂？直接 document.createElement 不行吗？

当然行。但 React 的目标不仅仅是“创建节点”，而是“高效地更新节点”。

假设你有一个包含 1000 个 <li> 的列表。如果你直接用原生 JS 循环创建，每次更新都要重新创建 1000 个节点，浏览器会卡死。

React 的 Fiber 架构和双缓冲树，使得它可以在内存中快速构建一棵新树，然后只对那些真正变了的地方（比如只变了第 500 个 li 的文字）进行微小的 DOM 操作。

第九幕：代码实战——模拟一个简单的 React 渲染器

为了让你更直观地理解，我们用原生 JS 写一个极简版的 React 渲染器，只实现 HostComponent 的挂载。

class SimpleReact {
  constructor(props) {
    this.props = props;
    this.state = null;
  }

  setState(newState) {
    // 简单的 state 更新逻辑
    this.state = { ...this.state, ...newState };
    this.render();
  }

  render() {
    // 模拟 JSX 转换
    return this.renderNode(this.props.node);
  }

  renderNode(node) {
    // 1. 如果是字符串或数字，返回文本节点
    if (typeof node === 'string' || typeof node === 'number') {
      return document.createTextNode(node);
    }

    // 2. 如果是对象，说明是组件或 DOM 标签
    if (typeof node === 'object') {
      // 创建容器 div
      const container = document.createElement(node.type || 'div');

      // 设置属性
      Object.keys(node.props || {}).forEach(key => {
        if (key !== 'children') {
          container.setAttribute(key, node.props[key]);
        }
      });

      // 3. 递归渲染子节点
      if (node.children) {
        if (Array.isArray(node.children)) {
          node.children.forEach(child => {
            container.appendChild(this.renderNode(child));
          });
        } else {
          container.appendChild(this.renderNode(node.children));
        }
      }

      return container;
    }

    return null;
  }
}

// 使用示例
const App = {
  type: 'div',
  props: {
    className: 'app',
    children: [
      { type: 'h1', props: { children: 'Hello World' } },
      { type: 'p', props: { children: 'This is a simple renderer.' } }
    ]
  }
};

const root = document.getElementById('root');
const app = new SimpleReact({ node: App });
root.appendChild(app.render());

看，虽然这个实现非常简陋，没有 Fiber，没有调度器，没有 Diff 算法，但它完美地复刻了 HostComponent 的创建流程：

1. createElement。
2. appendChild。
3. setAttribute。

React 的源码只是把这个逻辑封装得更复杂、更健壮、更高效而已。

第十幕：进阶坑点与注意事项

聊了这么多，你以为你就懂了？太天真了。

在实际的源码阅读中，你会遇到很多细节上的“坑”。

1. HostContext：React 18 引入了 HostContext。这是因为 React 支持嵌套的 Suspense 和 Portal。比如你在 Portal 里渲染组件，你的 HostContext 就不再是 document.body 了，而是那个 Portal 的容器。createInstance 需要知道当前的 HostContext，才能知道该往哪插 DOM。
2. HydrationMismatch：如果你的服务端渲染的 HTML 和客户端 JSX 不一致，React 会报错，然后回退到客户端渲染。这就是为什么 SSR 要极其小心，不能在服务端用 Date.now() 或者 window 对象。
3. Fiber 标签位：React 定义了大量的 tag 常量。HostComponent 只是其中之一（Tag 5）。还有 HostRoot (0), HostPortal (11), HostText (6), FunctionComponent (0), ClassComponent (1) 等等。beginWork 函数里有一个巨大的 switch 语句来处理这些情况。这就像是工厂流水线，不同的零件走不同的工位。
4. 副作用：HostComponent 的挂载不仅仅是创建 DOM，还涉及到副作用。比如，组件里的 useEffect 依赖于 DOM 元素，那么在 commitLayoutEffects 阶段，React 会确保 DOM 已经挂载好了，再执行 useEffect。

第十一幕：性能优化的本质

理解了 HostComponent 的创建流程，你就能理解 React 的性能优化了。

• 避免不必要的组件渲染：如果组件树深，递归 beginWork 的开销是巨大的。所以，React.memo 和 useMemo 的本质，就是通过 memoCompare 函数，提前拦截那些不需要重新 mountHostComponent 的节点。
• 减少 DOM 操作：React 的 Diff 算法虽然快，但它也只是“最小化” DOM 操作。如果你在一个列表里每秒插入 1000 个节点，React 的 Fiber 调度也会很吃力。这时候你应该用虚拟滚动，或者直接操作 DOM（比如 ListVirtualizer）。

第十二幕：最后的思考

HostComponent 的创建，是 React 从“声明式代码”到“命令式 DOM”翻译的第一步。

它隐藏了 document.createElement 的繁琐，隐藏了 appendChild 的细节，隐藏了 setAttribute 的重复。它给了你一个 <div />，你就以为它只是个标签。

但实际上，它背后是一个庞大的调度系统、一个复杂的 Fiber 树结构、一个高效的 Diff 算法，以及一个严谨的提交阶段。

当你下次写下 <div className="box">Hello</div> 时，希望你能想起这篇讲座。你能看到那个 <div> 不是凭空出现的，它是经过了 createInstance 的洗礼，经过了 appendAllChildren 的搬运，经过了 commitPlacement 的安家，才最终站在你的屏幕上。

这就是 React，这就是现代前端开发的魅力——用最简单的语法，构建最复杂的工程。

好了，今天的讲座就到这里。去读读源码吧，那个世界比你想象的要精彩得多。记得，代码是最好的老师，而源码就是那个最严厉的老师。别怕，他不会骂你，只会让你看更多的代码。