React 渲染原理

虚拟 DOM 的创建

React 使用 React.createElement 创建虚拟 DOM，返回值是 React 元素（虚拟 DOM）：

const element = React.createElement(
  "div", // DOM 类型
  {
    // DOM 属性
    style: { color: "red" },
    className: "container",
  },
  "hello", // 子节点
  React.createElement("span", { style: { color: "blue" } }, "world"),
);

JSX 语法

JSX 是 JavaScript 的语法扩展，最终会被 Babel 编译成 React.createElement 调用：

let jsxElement = (
  <div style={{ color: "red" }} className="container">
    hello
    <span style={{ color: "blue" }}>world</span>
  </div>
);

渲染方式

React 18 使用 createRoot API：

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

---

JSX 语法

JSX 是 JavaScript 的扩展语法，让在 JS 中写 HTML 变得更容易。

JSX 规则

// 1. 必须关闭所有标签
<br />;

// 2. 必须有一个父元素包裹
function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>
        Hello there.
        <br />
        How do you do?
      </p>
    </>
  );
}

// 3. 使用 className 而不是 class
<img className="avatar" />;

在 JSX 中使用 JavaScript

使用花括号 {} 可以在 JSX 中嵌入 JavaScript 表达式：

const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
        }}
      />
    </>
  );
}

提示：style= 不是特殊语法，而是 JSX 花括号内的一个普通对象。

---