ReactJS 中的 JSX工作原理

前言

ReactJS 中的 JSX（JavaScript XML）看起来像 HTML，但它其实只是语法糖，在底层是被编译成 React.createElement(...) 调用的 JavaScript 代码。理解其底层机制对优化性能、调试问题、使用 Hooks 等非常重要。

✅ 1. JSX 是什么？

JSX 是 JavaScript 的语法扩展，允许你这样写 UI：

const element = <h1>Hello, world!</h1>;

它看起来像 HTML，但不是。它不会被浏览器直接执行，而是会在构建阶段被转译为 JavaScript。

🔧 2. 编译后的样子（核心机制）

这段代码：

const element = <h1 className="title">Hello</h1>;

会被 Babel 编译为：

const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

等价于：

{
  type: 'h1',
  props: {
    className: 'title',
    children: 'Hello'
  }
}

最终，React 用这些对象来构建虚拟 DOM（Virtual DOM）。

🧱 3. React.createElement 做了什么？

它会返回一个React 元素对象：

{
  $$typeof: Symbol(react.element),
  type: 'h1',
  key: null,
  ref: null,
  props: {
    className: 'title',
    children: 'Hello'
  },
  _owner: null
}

这是一个纯 JS 对象，描述了 UI 的结构。不是 DOM 节点，还没有真正渲染。

🧠 4. JSX 与组件的关系

JSX 中也可以使用组件：

<MyButton text="Click me" />

被编译为：

React.createElement(MyButton, { text: "Click me" });

最终调用你自己写的 MyButton(props) 函数，返回另一个 createElement(...)。

🔄 5. JSX 到真实 DOM 的过程

1. JSX 被编译为 React.createElement(...)
2. React 构建虚拟 DOM 树
3. React 将虚拟 DOM diff（比对）旧的 DOM 树
4. React 使用 DOM API 更新真实 DOM（插入、删除、替换节点）

📘 6. JSX 与 Fragment、条件渲染等底层行为

• <></> → React.createElement(React.Fragment, null, ...)
• 条件渲染：{condition && <div>Yes</div>} → 三元或逻辑判断
• 循环渲染：{list.map(item => <li>{item}</li>)} → 多次 createElement 调用

⚠️ 7. 注意事项

✅ 总结

JSX 编译后如何通过 Fiber 架构驱动渲染更新

这一主线，系统讲解 React 的底层工作机制，包括：

✅ 一、React 渲染整体流程概览（React 18+）

graph TD
A[JSX] --> B[createElement]
B --> C[构建虚拟 DOM]
C --> D[Fiber 架构构建 Fiber Tree]
D --> E[Reconciliation（diff）]
E --> F[Commit 阶段：更新真实 DOM]

🧠 二、什么是 Fiber 架构？

Fiber 是 React 从 v16 开始的核心架构，其主要目标是：

• 支持任务中断（可暂停）
• 支持异步渲染（并发模式）
• 增强调度控制
• 支持优先级（Urgent、Normal、Idle）

Fiber = 一种“工作单元”结构，用链表组织虚拟 DOM，便于逐个处理、可打断、可恢复

📦 一个 Fiber 节点结构简化如下：

interface Fiber {
  type: string | FunctionComponent
  stateNode: HTMLElement | null
  child: Fiber | null
  sibling: Fiber | null
  return: Fiber | null
  alternate: Fiber | null // 双缓存机制
  effectTag: 'UPDATE' | 'PLACEMENT' | 'DELETION'
}

🔄 三、Reconciliation（协调 / diff）机制

目的：比较新旧 virtual DOM，找到最小变更，生成 effectList 用于更新真实 DOM。

Diff 规则核心简化：

• 同层比较：只比较同级节点
• Key 区分同类型组件：用于 map 渲染性能优化
• 类型不同 → 全替换
• 类型相同 → 尝试复用

⚙️ 四、Commit 阶段（更新真实 DOM）

当 Fiber 树构建完毕后，进入 commit 阶段：

// commitWork
switch (fiber.effectTag) {
  case 'PLACEMENT': // 插入
    parent.appendChild(fiber.stateNode);
    break;
  case 'UPDATE': // 属性或内容变更
    updateDOM(fiber.stateNode, oldProps, newProps);
    break;
  case 'DELETION':
    parent.removeChild(fiber.stateNode);
    break;
}

⏱️ 五、Concurrent Mode（React 18）

React 18 引入并发渲染模式，依赖 Fiber 实现：

🌟 调度示意（非阻塞渲染）：

startTransition(() => {
  setValue(input);
})

React 会调度优先级高的操作（如输入）先渲染，低优先的任务稍后处理。

📌 六、双缓冲机制（双 Fiber Tree）

React 使用 current 和 workInProgress 两棵 Fiber Tree，交替使用：

当 Reconciliation 完成，React 会“交换”两棵树，实现 快照切换。

🎯 七、性能优化的启示

✅ 总结：JSX 到 DOM 的底层机制主线

⏱️ React Fiber 调度与中断机制：时间切片、优先级调度、任务恢复

React Fiber 架构最大的突破之一就是它将渲染任务拆分为“工作单元”（Fiber 节点），并使用浏览器的空闲时间或非阻塞方式来执行这些任务。

✅ 1. 为什么需要中断渲染？

问题：

React 早期（v15 及以前）渲染是同步的：

ReactDOM.render(<App />, root);

如果组件树很大，JS 线程会被“卡死”，导致：

• 输入卡顿
• 动画掉帧
• 无法响应用户操作

✅ 2. Fiber 如何解决这个问题？

🧠 核心思想：把渲染拆成很多小任务，用浏览器空闲时间分批执行，并可中途暂停与恢复。

🎯 利用：

requestIdleCallback(callback)

或（React 18 起）用：

scheduler.unstable_scheduleCallback(priority, callback)

📦 3. 任务调度：Scheduler 的优先级系统

React 使用内部调度器（scheduler）给任务分配优先级：

⏳ 4. 时间切片机制（Time Slicing）

Fiber 会把任务拆成一个个 unit of work，然后循环调度：

while (nextUnitOfWork && shouldYield() === false) {
  nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
}

shouldYield() 检查是否要让位给浏览器，防止掉帧。

function shouldYield() {
  return performance.now() >= deadline;
}

🔁 5. 中断与恢复机制

如果 shouldYield() 为 true，Fiber 会 中断当前工作，然后把当前状态保存在 workInProgress 上，下次从这个点继续：

// workInProgress 保存当前 fiber 的指针链表状态

浏览器空闲后，React 会再次调度：

requestIdleCallback(workLoop)

⚙️ 6. Concurrent 模式的核心优势

🧠 7. 示例：startTransition 与中断渲染

import { startTransition } from 'react'

function handleInput(e) {
  const value = e.target.value

  // 非紧急更新，允许中断
  startTransition(() => {
    setFilteredList(filterBigList(value))
  })
}

用户打字不会因为 setFilteredList() 而卡顿，因为这是一个“可中断更新”。

✅ 8. 总结：Fiber 调度机制的精髓

📘 延伸（可选深入）

如果你还想进一步了解：

1. Lane Model（React 18 调度核心）
2. React Scheduler 实现（源码级）
3. Suspense + Fiber 如何协同暂停渲染树
4. Concurrent Features：如 React.lazy, Streaming SSR