揭秘 JSX 渲染原理（面向 React 初学者）

初次接触 React 代码的开发者可能会看到 JSX 后疑惑：为什么我的 JavaScript 代码里会有 HTML？然而，JSX 实际上既不是 HTML 也不是字符串，它是 JavaScript 的一种语法扩展。

这意味着什么？——所有你能用 JSX 实现的功能，都能用纯 JavaScript 实现。虽然大多数情况下你会用到 JSX，但这澄清了一个常见的误解，即使用 React 时必须使用 JSX。
由于我们经常用到它，因此了解这个抽象层在底层实际的工作原理很有帮助。

那么，当我们创建一个渲染 JSX 的 React 组件时会发生什么呢？它会被转换为使用 React.createElement API，该 API 会返回一个与传入类型相同的 React 元素。React 元素描述了用户界面中想要显示的内容，它本身就是一个普通的对象。这个类型可以是任何字符串形式的标签名（例如：'div'、'h2'、'span'）、一个 React 组件或一个 React Fragment。React.createElement 还接受 props 和 children 参数。React DOM 会负责更新 DOM 以匹配 React 元素。

React.createElement(
  type,
  [props],
  [...children]
)

我们来看一个例子

我们将创建一个组件Cat，该组件接收一个 name 属性，并渲染一个标题，标题中包含一个字符串，告诉我们猫的名字。

使用 JSX：

import React from "react";
import ReactDOM from "react-dom";

class Cat extends React.Component {
  render() {
    return <h1>My name is {this.props.name}</h1>
  }
}

ReactDOM.render( <Cat name="Fishguts" />,
  document.getElementById("app")
);

现在我们来看看如何使用 React.createElement 来重写这段代码，而无需使用 JSX。在 ReactDOM.render 函数中，我们创建并传入 Cat 组件和根 DOM 节点 'app'。我们使用 createElement，并将 Cat 组件作为类型，并将一个包含 name 属性的对象作为 props。在 Cat 组件内部，我们传入一个 h1 标签作为字符串，并将一个模板字面量作为子元素。

使用 React.createElement：

import React from "react";
import ReactDOM from "react-dom";

class Cat extends React.Component {
  render() {
    return React.createElement("h1", null, `My name is ${this.props.name}`);
  }
}

ReactDOM.render(
  React.createElement(Cat, { name: "Fishguts" }, null),
  document.getElementById("app")
); 

希望您通过本文对在 React 应用中编写 JSX 时发生的情况有了更深入的了解！

如果您有任何问题、意见或反馈，请告诉我。关注我，每周都会发布关于 JavaScript、React、Python 和 Django 的最新文章！