第一章：JSX 的实现原理

第一章：JSX 的实现原理

本章节将深入探讨 React 中 JSX 的实现原理，这是理解 React 工作原理的第一步。

什么是 JSX？

JSX 是 JavaScript 的语法扩展，它允许我们在 JavaScript 代码中编写类似 HTML 的标记。虽然 JSX 看起来像 HTML，但它实际上会被编译成普通的 JavaScript 函数调用。

实现原理

React 中的 JSX 实现主要依赖于 Babel 编译器。让我们通过一个简单的示例来了解其工作原理：

1. 基础设置

首先，我们需要在 HTML 中引入必要的依赖：

<!-- 引入 React 和 ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- 引入 Babel 编译器 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

2. JSX 代码示例

<script type="text/babel">
    function App() {
        return (
            <div>
                <h1>你好，React！</h1>
                <p>这是一个使用 CDN 引入 React 的示例。</p>
            </div>
        );
    }

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

3. 编译过程详解

Babel 的编译过程主要包含以下几个步骤：

1. 代码拦截：Babel 会查找所有 type="text/babel" 的 script 标签
2. 代码解析：将 JSX 代码解析成抽象语法树（AST）
3. 代码转换：将 JSX 语法转换为普通的 JavaScript 函数调用
4. 代码生成：生成最终的 JavaScript 代码

以下是编译过程的核心代码：

// 1. 拦截脚本
document.querySelectorAll('script[type="text/babel"]').forEach(script => {
    // 2. 获取原始代码
    const sourceCode = script.textContent;

    // 3. 解析成 AST
    const ast = Babel.parse(sourceCode, {
        sourceType: 'module',
        plugins: ['jsx']
    });

    // 4. 转换 AST
    const transformedAst = Babel.transformFromAst(ast, null, {
        presets: ['react']
    });

    // 5. 生成代码
    const outputCode = transformedAst.code;

    // 6. 创建新的脚本标签
    const newScript = document.createElement('script');
    newScript.textContent = outputCode;

    // 7. 替换原始脚本
    script.parentNode.replaceChild(newScript, script);
});

4. 编译结果

经过 Babel 编译后，JSX 代码会被转换成普通的 JavaScript 函数调用：

'use strict';

function App() {
    return React.createElement(
        'div',
        null,
        React.createElement(
            'h1',
            null,
            '你好，React！'
        ),
        React.createElement(
            'p',
            null,
            '这是一个使用 CDN 引入 React 的示例。'
        )
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App, null));

关键点总结

1. JSX 不是 HTML，它最终会被编译成 React.createElement() 函数调用
2. 每个 JSX 元素都会被转换成对应的 React.createElement() 调用
3. 编译过程由 Babel 完成，它负责将 JSX 语法转换为浏览器可以理解的 JavaScript 代码
4. 这种转换过程是 React 实现声明式 UI 的基础

下一步

在下一章节中，我们将深入探讨 React.render() 的实现原理，了解 React 是如何将虚拟 DOM 渲染为浏览器中的真实 DOM