从初识到精通：React 17 源码之旅（第二章）

2023-10-26 21:08:08

React 17 源码解析（2）：JSX 转换和 React.createElement

前言

踏入 React 源码的探索之旅，我们将从 JSX 转换和 React.createElement 的奥秘开始，逐步深入了解 React 的核心机制。

JSX 转换：从语法糖到高效代码

JSX，作为 React 的语法糖，将 HTML 融入 JavaScript，提供了更直观和易用的开发体验。在 React 17 之前，JSX 会被编译成 JavaScript 对象，再调用 React.createElement 创建 React 元素。而从 React 17 开始，JSX 的编译过程得到了优化。

现在，JSX 会被直接编译为 React.createElement 调用，无需中间的 JavaScript 对象转换，大大提高了性能。此外，React 17 还引入了 Fast Refresh 机制，当 JSX 代码发生变化时，只重新编译受影响的组件，进一步提升了开发效率。

React.createElement：元素创建的基石

React.createElement 是 React 元素创建的基础。它接收三个参数：

类型： React 组件的类型（例如，'div'、'button'）
属性： 传递给组件的属性对象（例如，{ onClick: () => {} }）
子元素： 组件的子元素（可以是字符串、数组或其他 React 元素）

React.createElement 返回一个表示 React 元素的 JavaScript 对象。这个对象包含类型、属性和子元素的信息。接下来，React 会将这个对象与其他元素一起构建成一颗虚拟 DOM（Document Object Model）。

深入源码：React.createElement 的实现

让我们深入 React.createElement 的源码来了解其内部机制：

export function createElement(type, props, children) {
  const element = {
    type,
    props: {
      ...props,
    },
  };
  if (children !== null) {
    if (children instanceof Array) {
      element.props.children = children;
    } else {
      element.props.children = [children];
    }
  }
  return element;
}