鼠鼠的 React.createElement 探险笔记 🐭

托尔呢
144 阅读4分钟

前言 🌟

作为一只远赴城市的农村小老鼠 🐭，我曾在凌晨10点的城市下水道，背诵过这样一段经典的 React "八股文"：

JSX 会被转换成 React.createElement 调用，返回一个节点对象，然后 React 根据这个对象创建真实 DOM 节点并处理属性绑定。

听起来简单，对吧？但这个解释实在是太过简略了！ 🤔

让我们一起深入探讨几个核心问题：

  1. JSX 是如何一步步转换成可解析的对象的？ 🎯
  2. 在被 React.createElement 处理之前，到底经历了什么神奇的过程？ ✨
  3. 属性绑定的背后，隐藏着什么样的机制？ 🔗

鼠鼠我呀！今天我们就要把这些问题彻底搞清楚！🐹

我们先要明确 JSX 到真实 DOM 的完整流程。所谓方向不对，越努力越不幸。在对 AI 三小只连番逼问下，终于得到了一个清晰的答案 🎯：

JSX
 ↓  ←（由 Babel 转换）
React.createElement(...)
 ↓
React Element（虚拟 DOM）
 ↓
React Reconciler（协调器，如 Fiber）
 ↓
React Renderer（如 react-dom）
 ↓
真实 DOM

简约而不简单，让我们一步一步来剖析这个神奇的转换过程 🔍：

第一步：开发者编写 JSX 代码 ✍️

const el = <h1 className="greeting">Hello, world!</h1>;

第二步：Babel 编译转换 🛠️

const el = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
```');

等等，你可能要问了："啥是 Babel？是一个库吗？为啥我没看见引用和调用呢？" 🤔

让鼠鼠来告诉你：Babel 的工作是构建时静态编译，而不是运行时调用。这一步在你运行应用前就已经悄悄完成了！ 🪄

"那既然是插件，肯定要有配置文件吧，就像 eslint.cjs 那样？"

说到这里就不得不提到 Babel 的强大插件化设计和预设机制了 🎮。这个话题可以专门开一篇来讲，但简单来说，Babel 已经默认为我们配置好了一套开发必备的插件。即使我们什么都不配置，它也能完美运行！

这种躺着不用干，它自己动的开发模式几乎是现代前端工具链里非常流行，不经开发体验体验爽到飞起 🚀，而且兼容性也很不错，你想追求刺激追求，提高能力边界，还可以开发自己的工具，直接接入进去。

咳咳，好像跑题有点远了 😅。各位如果想亲自体验 Babel 的魔力，可以去 Babel Playground 上玩耍一下。

Babel 的工作流程 🔄

阶段工具/插件作用
语法识别Babel parser把 JSX 解析成 AST
AST 转换@babel/plugin-transform-react-jsx把 JSXElement 转换成函数调用表达式
预设@babel/preset-react自动应用 JSX 插件，支持新旧编译模式
新模式支持react/jsx-runtime提供 jsx 等函数，支持无 React import

Babel 的能力可不止这些，后面我们会专门开一章详细介绍 📚。现在，我们只需要记住 createElement 这个重要流程，babel也干了，而且它排第一个干的！ 🎭

React 的进化之路：从 createElement 到 jsx-runtime 🚀

如果你刚才去 Babel Playground 耍的时候，是不是发现了一个有趣的现象：怎么没看到 React.createElement，反而冒出来一个 jsx 方法？🤔

其实啊从 React 17 开始，React.createElement 这个老大哥就悄悄退居幕后啦！你现在甚至不需要写 import React from 'react' 了（虽然有些老古董 ESLint 还会报警告，但别理它，程序能跑就行 😆）。

为什么会有这样的变化呢？因为 React 团队给 JSX 换了个实现：

  • 不再生成 React.createElement(...)
  • 改用更酷的 jsx(...), jsxs(...) 或 jsxDEV(...) 🎮

新老 JSX 大比拼 🏆

维度旧版 JSX（React 16 及之前）新版 JSX（React 17+ with "runtime": "automatic"）
JSX 编译目标React.createElement(...)jsx(...) / jsxs(...) from react/jsx-runtime
是否需要引入 React✅ 必须的！❌ 不用啦（Babel 偷偷帮你搞定）
性能相对慢，像个万金油更快，简直就是专业运动员 🏃‍♂️
文件体积稍微胖一点更苗条，减肥成功 💪
类型支持基础款豪华升级版，TypeScript 和 HMR 都说好 👍
组件调试名只能靠猜jsxDEV 给你全套调试信息 🔍
children 处理运行时才知道编译时就安排妥妥的 ⚡️

jsx 方法的内部实现 🔧

让我们偷偷看一眼 react/jsx-runtime 里的 jsx 方法是怎么实现的。源码在这里。虽然源码里有很多边界条件判断，还区分了开发和生产环境，但核心逻辑其实很简单，看看下面这个精简版：

import { REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE } from 'shared/ReactSymbols';
import { Type, Key, Props, Ref, ElementType } from 'shared/ReactTypes';

function ReactElement(type: Type, key: Key, ref: Ref, props: Props) {
    let element = {
        $$typeof: REACT_ELEMENT_TYPE,
        type,
        key,
        ref,
        props
    };
    return element;
}

export const jsx = (type: ElementType, config: any, ...children: any) => {
    let key: Key = null;
    let ref: Ref = null;
    const props: Props = {};
    
    // 处理配置项
    for (const prop in config) {
        const val = config[prop];
        if (prop === 'key') {
            if (val !== undefined) {
                key = '' + val;
            }
            continue;
        }
        if (prop === 'ref') {
            if (val !== undefined) {
                ref = val;
            }
            continue;
        }
        if ({}.hasOwnProperty.call(config, prop)) {
            props[prop] = val;
        }
    }

    // 处理子元素
    const childrenLength = children.length;
    if (childrenLength) {
        props.children = childrenLength === 1 ? children[0] : children;
    }

    return ReactElement(type, key, ref, props);
};

🤓 小知识：看到代码里的 $$typeof 没？它是用来标记当前创建的是一个 React Element 的。为啥要搞这个呢？拿 Fragment（就是我们天天用的 <></>）来说，React 内部有很多自己的组件类型，$$typeof 就是用来区分它们的身份证。感兴趣的小伙伴可以去翻翻 REACT_ELEMENT_TYPE 所在的源码文件，里面有更多好玩的东西～

未完待续... 🎬

哇！鼠鼠我终于把 React 最基础的这一步讲完啦，累趴了要歇会儿 🐭

不过别担心，接下来还有更精彩的内容：React 的三大核心 —— 调度器、协调器和渲染器！

avatar
文章
阅读
粉丝