跳到主要内容

认识

2023年11月13日
柏拉文
越努力，越幸运

一、认识​

在 React.js 17 之前, 应用程序通过 @babel/preset-react 将 JSX 语法转换为 React.createElement 的 js 代码，因此需要显式将 React 引入，才能正常调用 createElement。React.js 17 版本之后，官方与 babel 进行了合作，直接通过将 react/jsx-runtime 对 jsx 语法进行了新的转换而不依赖 React.createElement, 称为 Runtime Automatic（自动运行时）。在自动运行时模式下，JSX会被转换成新的入口函数，import {jsx as _jsx} from 'react/jsx-runtime'; 和 import {jsxs as _jsxs} from 'react/jsx-runtime';。

React 中的 createElement 以及 JSX 都会返回一个 ReactElement 对象, 用于后续创建 Fiber 对象。

由上所述, React 是纯运行时前端框架, 在运行前, 已经将 JSX 全部转换为 ReactElement 虚拟 DOM, 在运行中没有机会进行编译优化。

二、结构​

const ReactElement = function (type, key, ref, props) {
  const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type,
    key,
    ref,
    props
  };
  return element;
};

三、创建​

3.1 React.js 17.0 之后 jsx​

React.js 17.0 之后的 jsx 自动加入 import { jsx as _jsx } from "react/jsx-runtime" import 语句, 可以通过 Babel 的 automatic 进行演示。

Element

import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("div", {
  className: "home-page",
  children: " Home Page "
});

Class Component

import { jsx as _jsx } from "react/jsx-runtime";

class ClassComponent {
  render() {
    return /*#__PURE__*/_jsx("div", {
      className: "home-page",
      children: " Home Page "
    });
  }
}

Function Component

import { jsx as _jsx } from "react/jsx-runtime";

function functionCompoent() {
  return /*#__PURE__*/_jsx("div", {
    className: "home-page",
    children: " Home Page "
  });
}

3.1 React.js 17.0 之前 jsx​

React.js 17.0 之前的 jsx 没有自动引入 React, 因此, 需要在当前文件手动引入 React。可以通过 Babel 的 classic 进行演示。

Element

/*#__PURE__*/

React.createElement("div", {
  className: "home-page"
}, " Home Page ");

Class Component

class ClassComponent {
  render() {
    return /*#__PURE__*/React.createElement("div", {
      className: "home-page"
    }, " Home Page ");
  }
}

Function Component

function functionCompoent() {
  return /*#__PURE__*/React.createElement("div", {
    className: "home-page"
  }, " Home Page ");
}

四、问题​

4.1 Vue Template VS React JSX​

React JSX: React 是纯运行时前端框架, 没有机会进行编译优化。React 借助 Babel 与 @babel/plugin-transform-react-jsx 得到包含 jsx 函数的解析结果, jsx 函数用于生成 React.Element。

Vue Template: Vue Template 同时支持编译时 + 运行时, 在模版编译的时候可以进行非常好的性能优化, 比如: 动态标记、静态节点提升等。 Vue Template 是通过 Vue 自身实现的编译器解析, 最终生成 render 函数, render 函数内部通过 h 函数生成 VNode 虚拟节点。