Notes
Notes /react/08-interview/10-jsx-to-dom

JSX 是如何转变成为真实 DOM 的

结论：JSX 先编译成 ReactElement（普通对象），render 阶段通过 reconciler 把 ReactElement 变成 Fiber 树并打 flags，commit 阶段根据 flags 调用宿主配置创建/插入/更新真实 DOM。

1. JSX → ReactElement

  • 编译结果类似：React.createElement(type, props, children)
  • 得到 { type, key, props } 这样的描述对象

2. ReactElement → Fiber

  • reconcile（Diff）阶段把 element 转成 FiberNode，并连接成 workInProgress 树
  • 同时标记 Placement/Update/Deletion 等副作用

3. Fiber → DOM

  • commit 阶段：创建 DOM 节点、设置属性、插入到父节点
  • 执行 ref 与 effect（layout/passive）

关联阅读

← 聊聊 useState 的批处理更新机制useCallback 的实现原理是什么 →
cd ..